Jquery解析json数据详解

前端技术 2023/09/04 JavaScript

最近被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>

本文地址：https://www.stayed.cn/item/10533

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案