Jquery解析json数据详解_jquery

最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。

首先简单介绍一下getJson方法

Jquery.getJson(url,[data],[callback])

url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

下面是实战getJson方法

首先 创建一个辅助类，用于将dataset数据集转换成json字符串

复制代码 代码如下:

 public static string DataTableToJson(string jsonName, DataTable dt)
        {
            StringBuilder Json = new StringBuilder();
            Json.Append("{"" jsonName "":[");
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i                 {
                    Json.Append("{");
                    for (int j = 0; j                     {
                        Json.Append(""" dt.Columns[j].ColumnName.ToString() "":"" dt.Rows[i][j].ToString() """);
                        if (j                         {
                            Json.Append(",");
                        }
                    }
                    Json.Append("}");
                    if (i                     {
                        Json.Append(",");
                    }
                }
            }
            Json.Append("]}");
            return Json.ToString();
        }

此方法是msdn上的一个辅助类方法。

第二步 手动配置创建一个演示Dataset,但在项目中一般都是从数据库中或者service中获得数据

复制代码 代码如下:

 public static DataSet BindData()
        {
            DataTable dtData = new DataTable();
            dtData.Columns.Add("id");
            dtData.Columns。添加（ "姓名");
            dtData.Columns.Add("性别");
            DataRow drData;
            drData = dtData.NewRow();
            drData[0] = 16;
            drData [1] = "zhaoliu";
            drData[2] = "man";
            dtData.Rows.Add(drData);
            drData = dtData.NewRow();
            drData[0 ] = 19;
            drData[1] = "zhangsan";
            drData[2] = "女性";
            dtData.Rows.Add(drData);
            DataSet ds = new DataSet() ;
            ds.Tables.Add(dtData);
            return ds;
        }

第三步创建aspx页面

前台页面：两个按钮，一个按钮开始解析json数据，另外一个查看json字符串

复制代码代码如下：

   
   
   


   

       
gt;
       
gt;
       
gt;
        
   

   

后台页面：

复制代码代码如下：

 protected void Page_Load(object sender, EventArgs e)
        {
JsonAjax();
        }
        private void JsonAjax() {
            string action = Request["Action"];
            if (!string.IsNullOrEmpty(action) && action == "action") //判断是否通过前台的点击事件进来的
            {
                string str = DataTableConvertJson.DataTableToJson("json", Data.BindData().Tables[0]);
                Response.Write(str) ;
                Response.End();
            }
        }

最后给大家一下生成的json格式：

表单顶部

{"json":[{"id":"16","name":"zhaoliu","sex":"man"},{"id":"19","name":"zhangsan ","性别":"女性"}]}

表格底部