深入分析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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
微信小程序云开发之使用云数据库
May 17 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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 图像函数大举例(非原创)
2009/06/20 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
javascript基本类型详解
2014/11/28 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python3.7添加dlib模块的方法
2020/07/01 Python
如何通过python检查文件是否被占用
2020/12/18 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
最新的互联网创业计划书
2014/01/10 职场文书
常务副总经理任命书
2014/06/05 职场文书
家庭教育的心得体会
2014/09/01 职场文书
平面设计师岗位职责
2014/09/18 职场文书
公司租房协议书
2014/10/14 职场文书
打架检讨书范文
2015/01/27 职场文书
出纳试用期自我评价
2015/03/10 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python