如何使用json在前后台进行数据传输

上一篇博客写到用javascript生成多组文本,可以让数据的输入不受显示,现在我们需要把这些输入写入数据库,这里就用到json传入。

首先,我们来写一下后台如何生成要传输的数据

    function  generateDtb() {
     //写入
            var txtName = document.getElementById("txtName").value;
            //创建数组
            var dtb = new Array();
            //通过循环把数据写入到数组并返回
            for (var i = 0; i < firstGroup.length; i++) {  

                var row = new Object();
                row.Name = txtName;
                row.fullMoney = firstGroup[i].value;
                row.discount = secondGroup[i].value;
                dtb.push(row);
            }
            return dtb;
        }  

把数组转换成json串传入到后台:

    $(function () {
                //点击botton1
                $("#lbtnOK").click(function () {
                    var url = "DiscountManger.aspx?ajax=1";
                    var dtb = generateDtb();
                   // var strName = document.getElementById("txtName").value;  

                    if (dtb == null)
                    {  }
                    else {
                        //序列化对象
                        var postdata = JSON.stringify(dtb);
                        //异步请求
                        $.post(url, { json: postdata }, function (json) {
                            if (json) {
                                jBox.tip("添加成功!", "提示");
                                location.reload();
                            }
                            else {
                                jBox.tip("添加失败!", "提示");
                                location.reload();
                            }
                        }, "json")  

                    }
                });
            });  

在后台的操作:

首先判断是否需要传输数据

    if (!IsPostBack)
                    {
                        //判断是否异步请求
                        if (Request.QueryString["ajax"] == "1")
                        {
                            ProcessRequest();
                        }  

在这里进行对数据的处理:

    /// <summary>
            /// 处理异步请求
            /// </summary>
            private void ProcessRequest()
            {
                //存入要填写的策略
                ArrayList arrDiscount = new ArrayList();
                Response.ContentType = "text/html";
                string json = Request.Form["json"];
                //反序列化DataTable
                if (json == null)
                {
                    return;
                }
                else
                {
                    DataTable newdtb = Json2Dtb(json);
                    for (int i = 0; i < newdtb.Rows.Count; i++)
                    {
                        Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount();
                        //打折方案名
                        enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString();
                        //商店ID
                        enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID);  

                        enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString());
                        enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString());
                        //写入数据到数组
                        arrDiscount.Add(enStrategyDiscount);
                    }
                    //写入数据到数据库
                    IStrategyBLL strategy = new StrategyBLL();  

                    if (strategy.AddStrategyDiscount(arrDiscount))
                    {
                        Response.Write("true");
                        Response.End();
                    }
                    else
                    {
                        Response.Write("false");
                        Response.End();
                    }  

                }  

这里,我们需要把json转换成datatable

    /// <summary>
           /// Json转DataTable
           /// </summary>
           /// <param name="json"></param>
           /// <returns></returns>
           private DataTable Json2Dtb(string json)
           {  

                   JavaScriptSerializer jss = new JavaScriptSerializer();
                   ArrayList dic = jss.Deserialize<ArrayList>(json);
                   DataTable dtb = new DataTable();
                   if (dic.Count > 0)
                   {
                       foreach (Dictionary<string, object> drow in dic)
                       {
                           if (dtb.Columns.Count == 0)
                           {
                               foreach (string key in drow.Keys)
                               {
                                   dtb.Columns.Add(key, drow[key].GetType());
                               }
                           }
                           DataRow row = dtb.NewRow();
                           foreach (string key in drow.Keys)
                           {
                               row[key] = drow[key];
                           }
                           dtb.Rows.Add(row);
                       }
                   }  

               return dtb;
           }  

这样,就可以把数据无刷新的写入到数据库。

当然,如果我们有一个从数据库读取的datatable,如果通过json显示在前台呢。

首先,我们需要把datatable转换为json数据

    /// <summary>
            /// DataTable转Json
            /// </summary>
            /// <param name="dtb"></param>
            /// <returns></returns>
            private string Dtb2Json(DataTable dtb)
            {
                JavaScriptSerializer jss = new JavaScriptSerializer();
                ArrayList dic = new ArrayList();
                foreach (DataRow row in dtb.Rows)
                {
                    Dictionary<string, object> drow = new Dictionary<string, object>();
                    foreach (DataColumn col in dtb.Columns)
                    {
                        drow.Add(col.ColumnName, row[col.ColumnName]);
                    }
                    dic.Add(drow);
                }
                return jss.Serialize(dic);
            }  

然后写回到前台

    /// <summary>
    /// 处理异步请求
    /// </summary>
    private void ProcessRequest()
    {
        Response.ContentType = "text/html";
        string json = Request.Form["json"];
        //反序列化DataTable
        DataTable newdtb = Json2Dtb(json);
        //序列化DataTable为JSON
        string back = Dtb2Json(newdtb);
        Response.Write(back);
        Response.End();
    }  

在前台接受显示:

    $(function() {
                //点击botton1
                $("#botton1").click(function() {
                        createTable(json);
                  });
            });  

         //显示Json中的数据
            function createTable(json) {
                var table = $("<table border=‘1‘></table>");
                for (var i = 0; i < json.length; i++) {
                    o1 = json[i];
                    var row = $("<tr></tr>");
                    for (key in o1) {
                        var td = $("<td></td>");
                        td.text(o1[key].toString());
                        td.appendTo(row);
                    }
                    row.appendTo(table);
                }
                table.appendTo($("#back"));
            }  

这样,就完成了json向后台传输数据和显示后台数据了,当然,这种传输方式只是传输的一种,如果是简单的字符串也可以用get和post进行传输,但是,javascript本身具有不安全性和不稳定行,对于一些比较重要的数据,建议还是寻找一些更可靠的方法。

时间: 2024-11-05 16:08:36

如何使用json在前后台进行数据传输的相关文章

JQuery + JSON作为前后台数据交换格式实践

JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为一种轻量数据格式,被浏览器js引擎普遍支持,同xml格式. 使用AJAX+JSON数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置, 来实现动态页面,表示

SSM框架用JSON进行前后端数据传输

一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输 前端代码 这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内容可以无视,只有美化效果): <form class="form-horizontal" > <label for="firstname" class="col-sm-2 control-label">用户ID</lab

C# Ajax 返回json数据--前后台交互

本人实习生一枚,遇到这个问题,网上找的试了试基本不可以,自己搞了一下.可以供新手参考,大神如有指点,请不吝赐教. 版权声明:本文为博主原创文章,未经博主允许不得转载. 前台JavaScript代码: 1 <script> 2 function checkLogin() { 3 var name = $("#name").val(); 4 var passward = $("#password").val(); 5 console.log(name); 6

json的好处-新一代数据传输利器

Json其实和XML一样,作为数据中间传送对象,本身是一个文本.不过这个文本有自己的结构.(是不是可以联想到C语言的数据结构). 因为是文本所以各种语言都能兼容,包含JS这种轻量级的客户端脚本. 为什么不XML XML的冗余太大,不过XML阅读起来比较方面,所以并没有被json完全取代,很多时候都是并存.比如sina微博的开发平台有一个JSON版本和一个XML版本.以前是,现在没看. 比如xml <Book> <name>name</name> <author&g

XML在数据传输哪些方面会比JSON有优势,在哪些领域更加适合?

这个问题如今是个政治问题,说什么都会有人反对.我只能说个人看法,那就是:如果谈数据传输,XML 相对 JSON 没有任何优势,从一开始就是如此. 很多当下的 XML 支持者可能都忘了,XML 一开始不是为网络传输设计的,而是为了替代 HTML.所以它才会如此强调结构化(相对 HTML 4 的混乱结构而言容易分析)和格式中内建编码信息(便于跨国数据交换).但是 XML 诞生后在这方面一直不温不火,也就在 XHTML 中略有建树.其它的应用虽然也有,比如 MathXML.XSLT 之类,也都不算被广

Introduction to Json

什么是Json 是Javascript·对象的一种表示,属于轻量级数据,它比XMl小,快,易解析 作用: 用于存储和交换(转换)信息的语言,还可以将各种数据类型放在json中并进行数据传输 整理的章节图 讲解 json架构两种表示 对象 {key:value} 数组["value1","value2",...] 下面咱们就做个小的实例来看看 Json对象,它的表示和js中的对象字面量几乎是同一种表示.下面的就是一个对象(数组) 这个 employee 对象是包含 3

json为txt文本加密

我们知道json是一种数据传输的加密格式 这里为txt格式的文本加密(纯属无聊) 写的比较凌乱,查找你输入的两个文件夹下面的所有txt文件(包含下一级文件): 运行时要注意,别把重要文件给加密了 1 import os.path, time 2 import json 3 import glob 4 import os 5 import time 6 7 8 def wenjian(): #查找每个文件夹下面的文件 9 wen=[] 10 11 for i in rootdir: 12 13 f

JavaScript对象与JSON字符串互相转换详解

JSON是目前互联网数据传输所采用的的主要格式,很多编程语言都有针对JSON的解析器和序列化器,在web前台领域,js对象与JSON字符串的互相转换需求也较为常见. 此文主要讲解js对象和JSON字符串互相转换的方法和一些细节 首先如果需要在开发中使用JSON传输及相应转换需要在html中引入json.js或者json2.js,下载地址:https://github.com/douglascrockford/JSON-js 1.js对象转JSON字符串(序列化) var jsonText = J

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

ON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. XHTML  <ul id="userlist">    <li><a href="#" rel="1">张三</a></li>    <li><a href=&quo