深入分析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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
详解element上传组件before-remove钩子问题解决
Apr 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
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python如何支持并发方法详解
2020/07/25 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
自我评价范文
2013/12/22 职场文书
寒假实习自荐信
2014/01/26 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
商业活动邀请函
2014/02/04 职场文书
房地产广告词大全
2014/03/19 职场文书
党员民主评议总结
2014/10/20 职场文书
医院护士工作检讨书
2014/10/26 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书