您的位置:首页 > Web前端 > JavaScript

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

2018-01-15 20:55 483 查看
转自:http://blog.csdn.net/laner0515/article/details/8784959

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

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

 

[html] view
plaincopy

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串传入到后台:

[html] view
plaincopy

$(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")  

  

                      

                }  

            });  

        });  

 

在后台的操作:

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

 

[html] view
plaincopy

if (!IsPostBack)  

                {  

                    //判断是否异步请求   

                    if (Request.QueryString["ajax"] == "1")  

                    {  

                        ProcessRequest();  

                    }  

 

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

[html] view
plaincopy

/// <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

[html] view
plaincopy

/// <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数据

 

[html] view
plaincopy

/// <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);  

        }  

 

然后写回到前台

 

[html] view
plaincopy

/// <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();  

}  

在前台接受显示:

 

[html] view
plaincopy

$(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本身具有不安全性和不稳定行,对于一些比较重要的数据,建议还是寻找一些更可靠的方法。

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: