深入分析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 相关文章推荐
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python登录注册验证功能实现
2018/06/18 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python带参数打包exe及调用方式
2019/12/21 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
顶撞老师检讨书
2014/02/07 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
MySQL 使用索引扫描进行排序
2021/06/20 MySQL