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)
        {
         Json.Append("{"" jsonName "":[ ");
           if (dt.Rows.Count > 0)
           ws.Count; i )
                {
            ("{");
                    for (int j = 0; j                                   {
                    (",");
                        }
                    }
                    Json.Append("}");
                    if (i                     {
                        Json. Append(",");
                    }
        🎜>            Json.Append("]}");
           🎜>
此方法是msdn上的一個輔助類別方法。

第二步手動設定建立一個示範Dataset,但在專案中一般都是從資料庫或service中取得資料




複製程式碼

程式碼如下:

 public static DataSet BindData()
        {
           Add("id");
            dtData.Columns.新增（ "姓名");
            dtData.Columns.Add("性別");
          );
            drData[0] = 16;
            drData [1] = "zhaoliu";
            drData[2] = "man";
          dtData.NewRow();
            drData[0 ] = 19;
            drData[1] = "zhangsan";
           drData);
            DataSet ds = new DataSet() ;
            ds.Tables.Add(dtData);
           >
前台頁：兩個按鈕，一個按鈕開始解析json數據，另外一個查看json字串




複製程式碼

程式碼如下：

   
   
   


   

   

       

       

       

        
   

   

后台页面：

复制代码 代码如下:

 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格式：

Top of Form

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

Bottomof Form