铁雪资源网 Design By www.gsvan.com

最近被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="/UploadFiles/2021-04-02/jquery-1.4.1.min.js">    <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();
            }
        }

最后给大家展示一下生成的json格式:

Top of Form

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

Bottomof Form

标签:
Jquery,json

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“Jquery解析json数据详解”

暂无Jquery解析json数据详解的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。