Jquery解析json数据详解


Posted in Javascript onDecember 26, 2013

最近被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();
            }
        }

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

Top of Form

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

Bottomof Form

Javascript 相关文章推荐
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
Jquery getJSON方法详细分析
Dec 26 #Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 #Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 #Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 #Javascript
JS不间断向上滚动效果代码
Dec 25 #Javascript
js中同步与异步处理的方法和区别总结
Dec 25 #Javascript
在javascript中实现函数数组的方法
Dec 25 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
Codeigniter发送邮件的方法
2015/03/19 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
Prototype Number对象 学习
2009/07/19 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JavaScript 原型继承
2011/12/26 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年党性分析材料
2014/12/19 职场文书
家庭贫困证明
2015/06/16 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL