JQuery- 解析JSON数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。上例中得到的JSON数据如下,是一个嵌套JSON:
{"comments":[{"content":"很不错嘛","id":,"nickname":"纳尼"},{"content":"哟西哟西","id":,"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":,"nickname":"纳尼"},{"content":"哟西哟西","id":,"nickname":"小强"}]
$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。
如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:
{"comments":[{"content":"很不错嘛","id":,"nickname":"纳尼"},{"content":"哟西哟西","id":,"nickname":"小强"}],"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员","博客":"http:\/\/www.cnblogs.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,十分方便。
上例的运行效果:jQuery很强大
原文网址:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html
JQuery- 解析JSON数据的更多相关文章
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- 使用jQuery解析JSON数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments&quo ...
- 使用jQuery解析JSON数据(由ajax发送请求到php文件处理数据返回json数据,然后解析json写入html中呈现)
在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后 ...
- 深入分析jquery解析json数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...
- 使用jQuery解析JSON数据-已验证
本文来源于:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 上例中得到的JSON数据如下,是一个嵌套JSON: {&qu ...
- 使用原生javascript和jQuery解析json数据
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...
- JQuery解析json数据
<script> var data ="{" + "root:[" + "{name:'1',value:'0'}," + &q ...
- springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据
- (转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
- Jquery解析Json格式数据
今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...
随机推荐
- Oracle数据库安装完成之后的启动操作
由于是菜鸟,在 完成Oracle数据库的安装之后,不知道该怎么启动.在经过一番折腾之后明白了其中的一些道理,总结如下: 其实Oracle数据库和Mysql数据库的启动都是相同的原理. Mysql数据库 ...
- 【弱省胡策】Round #6 String 解题报告
感觉这个题好神啊. 首先我们只管 $a = b$ 的情况,那么我们自然就可以把这个串对 $a$ 取模,然后用 KMP 求出能弄出几个其他的 B 串. 具体就是把串先倍长,然后倒过来,然后求 $Next ...
- [DP] Rod-cutting problem
给一个长度为 n 的杆子,切成小段卖出去,价格根据小段的长度不同而不同.下面是一个例子 我们要通过切成小段卖出尽可能高的总价钱.问题是:How to decompose the problem? De ...
- HDU 1253 胜利大逃亡(三维BFS)
点我看题目 题意 : 中文题不详述. 思路 :因为还牵扯到层的问题,所以用三维的解决,不过这个还是很简单的BFS,六个方向搜一下就可以了,一开始交的时候老是超时,怎么改都不对,后来看了一个人写的博客, ...
- 这个帖子要收藏,以后用得着--python 实时获取子进程输出
在论坛上找到方法了,http://bbs.csdn.net/topics/340234292 http://blog.csdn.net/junshao90/article/details/821575 ...
- 解决Ubuntu root账户的问题
问题的提出:在Linux环境下,许多操作需要有管理员权限才能进行.如果没有root权限,就连基本的文件拷贝操作都只能在用户文件夹下进行,而对于Ubuntu系统,安装时是没有设定root帐号的,那么怎样 ...
- http://www.ruanyifeng.com/blog/2011/09/restful
http://www.ruanyifeng.com/blog/2011/09/restful
- SPRING IN ACTION 第4版笔记-第六章RENDERING WEB VIEWS-005- 使用ApacheTiles(TilesConfigurer、TilesViewResolver、<put-attribute>、<t:insertAttribute>)
一. 1.定义TilesConfigurer.TilesViewResolver的bean 注意有tiles2和tiles3,这里使用tiles3 (1)java形式 package spittr.w ...
- 重温XML
关于什么是XML,以及XML有什么作用,网络上很多,我就在这里不班门弄斧,写博客,是我的一个习惯,究其内容无非个人情感,心得体会,转载,技术相关的,或者一时心血来潮的个人之谈,但是我是一个小心翼翼的人 ...
- str.match(regex)与regex.exec(str)对比解析,从此不再晕
match属于字符串的方法,exec属于正则表达式的方法.其中regex是否有g标志的区别经常搞不清,所以测试记录下. 1.str.match(regex) regex中无g标志 返回一个数组,arr ...