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修改css样式style
Apr 15 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
浅谈javascript的调试
Jan 28 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
JS中min函数实例讲解
Feb 18 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
Php注入点构造代码
2008/06/14 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Django 用户认证组件使用详解
2019/07/23 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
事业单位接收函
2014/01/10 职场文书
实习鉴定评语
2014/01/19 职场文书
进步之星获奖感言
2014/02/22 职场文书
医学生求职自荐书
2014/06/12 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书