深入分析jquery解析json数据


Posted in Javascript onDecember 09, 2014

我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

JSON数据如下,是一个嵌套JSON:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个书返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接 受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当 前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {

    $.getJSON("loadInfo", function(data) {

        $("#info").html("");//清空info内容         $.each(data.comments, function(i, item) {

            $("#info").append(

                    "<div>" + item.id + "</div>" + 

                    "<div>" + item.nickname    + "</div>" +                     "<div>" + item.content + "</div><hr/>");

        });

        });

}

正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对象,在下面 的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包 含的JSON数组:

[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]

$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下:

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],

"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员",

"博客":"http:\/\/www.xxx.com\/codeplus\/"},"title":"123木头人"}

js如下:

function loadInfo() {

    $.getJSON("loadInfo", function(data) {

        $("#title").append(data.title+"<hr/>");

        $("#content").append(data.content+"<hr/>");

        //jquery解析map数据

        $.each(data.infomap,function(key,value){

            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");

        });

        //解析数组

        $.each(data.comments, function(i, item) {

            $("#info").append(

                    "<div>" + item.id + "</div>" + 

                    "<div>" + item.nickname    + "</div>" +

                    "<div>" + item.content + "</div><hr/>");

        });

        });

}

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

Javascript 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
WEB前端设计师常用工具集锦
Dec 09 #Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 #Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 #Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 #Javascript
jQuery on方法传递参数示例
Dec 09 #Javascript
jquery实现侧边弹出的垂直导航
Dec 09 #Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 #Javascript
You might like
php5数字型字符串加解密代码
2008/04/24 PHP
php 文件上传实例代码
2012/04/19 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python中循环语句while用法实例
2015/05/16 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
《寓言两则》教学反思
2014/02/27 职场文书
实习评语大全
2014/04/26 职场文书
设计专业自荐信
2014/06/19 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
小学生表扬稿范文
2015/05/05 职场文书