我们先以解析上例中的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.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很强大,so...更多的了解还得参考文档,(ˇˍˇ) 想~

使用jQuery解析JSON数据的更多相关文章

  1. 用jquery解析JSON数据的方法以及字符串转换成json的3种方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...

  2. 使用jQuery解析JSON数据(由ajax发送请求到php文件处理数据返回json数据,然后解析json写入html中呈现)

    在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后 ...

  3. 深入分析jquery解析json数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...

  4. 使用jQuery解析JSON数据-已验证

    本文来源于:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 上例中得到的JSON数据如下,是一个嵌套JSON: {&qu ...

  5. 使用原生javascript和jQuery解析json数据

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...

  6. JQuery解析json数据

    <script> var data ="{" + "root:[" + "{name:'1',value:'0'}," + &q ...

  7. springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据

  8. (转)springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...

  9. Jquery解析Json格式数据

    今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...

随机推荐

  1. 在win10里打开.hlp文件

    D7的帮助都是.hlp格式的,  目前win10还没有相应的补丁, 导致无法打开 自己手动来处理一下: 1. 下载连接中的winhlp32.rar, 这个是从XP系统里提取的 2. 修改windows ...

  2. input checkbox属性-Indeterminate状态

    我们在使用input标签,多选框时,通常会看到两种状态,即选中(checked)和被选中(unchecked). // 选中状态也可写成checked="checked" chec ...

  3. ife任务刷题总结(一)-css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

  4. CentOS 下部署 ASP.NET Core环境

    一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...

  5. iOS中的线程安全问题

    为了保证线程安全,不会因为多个线程访问造成资源抢夺,出现的运行结果的偏差问题,我们需要使用到线程同步技术,最常用的就是 @synchronized互斥锁(同步锁).NSLock.dispatch_se ...

  6. Python模拟实现Linux系统unix2dos功能

    目标 1.Linux系统与windows系统文件系统换行符问题 2.实现unix文件转换成dos文件格式 1.Linux系统与windows系统文件系统换行符 •关于回车|换行的来历 在计算机还没有出 ...

  7. 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器

    引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...

  8. css表示屏幕宽度和高度

    expression(document.body.offsetWidth + "px"); expression(document.body.offsetHeight + &quo ...

  9. IE中cookie问题,带下划线的前置域名会不给设cookie,谷歌和火狐浏览器则不受影响

    !! WARNING !!: Server hostname contains an underscore and this response sets a cookie. Internet Expl ...

  10. Java网络编程之流——流、过滤器、阅读器和书写器

    Java的I/O建立于流(Stream)之上.输入流读取数据:输出流写入数据.所有的输出流都有相同的基本方法来写入数据,所有输入流也使用相同的基本方法来读取数据.在创建流之后,你通常可以忽略在读写时的 ...