萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery解析json數據詳解
Jquery解析json數據詳解
本篇文章主要是對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(); } } 最後給大家展示一下生成javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved