深入分析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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
js实现数组和对象的深浅拷贝
Sep 30 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 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
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
js输出列表实现代码
2010/09/12 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript DOM基础
2015/04/13 Javascript
javascript实现动态标签云
2015/10/16 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python 性能提升的几种方法
2016/07/15 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
餐厅总厨求职信
2014/03/04 职场文书
婚礼秀策划方案
2014/05/19 职场文书
找工作求职信
2014/07/07 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
云冈石窟导游词
2015/02/04 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python