jquery json解析详解
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。
JSON数据如下,是一个嵌套JSON:
|
1
|
{"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的解析就迎刃而解咯。(*^__^*) 嘻嘻……
|
1
2
3
4
5
6
7
8
9
|
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数组:
|
1
|
[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}] |
$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。
上例的运行结果如下:

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:
|
1
2
3
|
{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员","博客":"http:\/\/www.cnblogs.com\/codeplus\/"},"title":"123木头人"} |
js如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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,十分方便。
上例的运行效果:

jquery json解析详解的更多相关文章
- android Json解析详解
JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语 言的支持),从而可以在不同平台间进行数 ...
- android Json解析详解(详细代码)
JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...
- SpringMVC接受JSON参数详解及常见错误总结我改
SpringMVC接受JSON参数详解及常见错误总结 最近一段时间不想使用Session了,想感受一下Token这样比较安全,稳健的方式,顺便写一个统一的接口给浏览器还有APP.所以把一个练手项目的前 ...
- Angular Npm Package.Json文件详解
Angular7 Npm Package.Json文件详解 近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...
- SpringMVC接受JSON参数详解及常见错误总结
SpringMVC接受JSON参数详解及常见错误总结 SpringMVC接受JSON参数详解及常见错误总结 最近一段时间不想使用Session了,想感受一下Token这样比较安全,稳健的方式,顺便写一 ...
- SpringMVC接受JSON参数详解
转:https://blog.csdn.net/LostSh/article/details/68923874 SpringMVC接受JSON参数详解及常见错误总结 最近一段时间不想使用Session ...
- jQuery的观察者模式详解 转载
jQuery的观察者模式详解 投稿:hebedich 本文主要是介绍了jQuery中on方法及trigger方法,以及围绕这个方法来体验的观察者模式,是篇非常不错的文章,对我们理解观察者模式很有帮助. ...
- 最强常用开发库总结 - JSON库详解
最强常用开发库总结 - JSON库详解 JSON应用非常广泛,对于Java常用的JSON库要完全掌握.@pdai JSON简介 JSON是什么 JSON 指的是 JavaScript 对象表示法(Ja ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
随机推荐
- razor----js
<script> $(document).ready(function () { // 2 直接加引号转换 var SpecialAptitude = '@Model.SpecialAp ...
- python学习笔记013——推导式
1 推导式简介 推导式comprehensions(又称解析式),是Python的一种独有特性. 推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 推导式有三种形式: 1)列表推导式 (li ...
- Linux内核(12) - 子系统的初始化之那些入口函数
内核选项的解析完成之后,各个子系统的初始化即进入第二部分—入口函数的调用.通常USB.PCI这样的子系统都会有一个名为subsys_initcall的入口,如果你选择它们作为研究内核的切入点,那么就请 ...
- Android图片处理:识别图像方向并显示
在Android中使用ImageView显示图片的时候发现图片显示不正.方向偏了或者倒过来了. 解决问题非常自然想到的分两步走: 1.自己主动识别图像方向,计算旋转角度. 2.对图像进行旋转并显示. ...
- 微服务之springcloud技术栈
一.微服务架构图: 二.技术介绍:(技术选型随着代码的编写会完成) 关于技术选型,我盗了一张微服务技术栈的图,如下:原文:http://www.jianshu.com/p/2da6becfb019 我 ...
- 解决Linux(ubuntu),windows双系统重装后恢复开机选单
1 重装ubuntu后恢复开机选单十分简单.直接更新grub就能够了: sudo update-grub 2 重装windows后显得麻烦一点.需用u盘写入ubuntu镜像重新启动使电脑从u盘启动, ...
- CCNotificationCenter(一)
const std::string testsName[MAX_COUNT] = { "Bug-350", "Bug-422", "Bug-458&q ...
- js异步加载的解决方案
默认情况javascript是同步加载的,javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实 ...
- [转]Understanding Weak References
原文地址:https://weblogs.java.net/blog/enicholas/archive/2006/05/understanding_w.html 推荐另一篇文章:http://www ...
- 快速排序——PowerShell版
继续读啊哈磊算法有感系列,继续升华.上一篇是冒泡排序,在结尾总结了一下冒泡排序的缺点——时间复杂度O(N*N)太大.这一篇来说一下快速排序,快速排序可以在多数情况下克服冒泡排序的缺点(最坏的情况下和冒 ...