您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
Jquery解析json数据详解
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对Jquery解析json数据进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
最近被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 < dt.Rows.Count; i++) { Json.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { Json.Append(""" + dt.Columns[j].ColumnName.ToString() + "":"" + dt.Rows[i][j].ToString() + """); if (j < dt.Columns.Count - 1) { Json.Append(","); } } Json.Append("}"); if (i < dt.Rows.Count - 1) { Json.Append(","); } } } Json.Append("]}"); return Json.ToString(); } 此方法是msdn上的一个辅助类方法。 第二步 手动配置创建一个演示Dataset,但在项目中一般都是从数据库中或者service中获得数据 代码如下: public static DataSet BindData() { DataTable dtData = new DataTable(); dtData.Columns.Add("id"); dtData.Columns.Add("name"); dtData.Columns.Add("sex"); 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] = "women"; dtData.Rows.Add(drData); DataSet ds = new DataSet(); ds.Tables.Add(dtData); return ds; } 第三步 创建aspx页面 前台页面：两个button，一个单击开始解析json数据，另外一个查看json字符串 代码如下: <head runat="server"> <title></title> <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script language="javascript" type="text/javascript"> $(function () { $("#btn").click(function () { $.getJSON("GetJsonDemo.aspx", { Action: "action" }, function (data) { var txt = ""; $.each(data, function (k, v) { $.each(v, function (m, n) { txt += "id :"+n.id + ";name :" + n.name + ";sex :"+n.sex+"<br/>" }); }); $("#txt").html(txt); }); }); }); $(function () { $("#btn2").click(function () { $.get("GetJsonDemo.aspx", { Action: "action" }, function (data) { $("#txt2").text(data); }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input id="btn" type="button" value="paser json" /><br /> <input id="btn2" type="button" value="watch json string" /><br /> <label id="txt"></label><br /> <label id="txt2"></label> </div> </form> </body> 后台页面： 代码如下: 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(); } } 最后给大家展示一下生成- 上一个程序编程： jquery1.9下检测浏览器类型和版本的方法
- 下一个程序编程： Get中文乱码问题解决方案
