JQuery解析JSON数据

<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

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...更多的了解还得参考文档,(ˇ?ˇ) 想~

时间: 2024-10-07 02:22:01

JQuery解析JSON数据的相关文章

bobo使用jQuery解析JSON数据

上例中得到的JSON数据如下,是一个嵌套JSON: {"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]} 获取JSON数据,在jQuery中有一个

简单的jQuery解析json数据

<span style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);">尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/41113275)...</span> 以下是摘取部分json,jQuery需自

jquery解析json格式数据的方法(对象、字符串)

相关函数 函数 描述 JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象. JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串. //data为字符串类型 则要将字符串类型转换成json数据类型 var jsondatas=eval("("+data+")"); 本文实例讲述了jquery解析json格式数据的方法.分享给大家供大家参考,具体如下: json数据是我们常用的一种小型的数据实

jquery学习笔记---each解析json数据

使用jQuery解析JSON数据 在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments":[{"content":"很不错嘛","id":1,"nickn

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

json作为一种轻量级的数据交换格式,在前后台数据交换中占领着很重要的地位.Json的语法很简单,採用的是键值对表示形式.JSON 能够将 JavaScript 对象中表示的一组数据转换为字符串,然后就能够在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给server端程序,也能够从server端程序传递json格式的字符串给前端并由前端解释.这个字符串是符合json语法的,而json语法又是javascript语法的子集,所以javascript很easy解释

Jquery解析Json格式数据

今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等). 这些特性使JSON成为理想的数据交换语言. JSON建构于两种结构: “名称/值”对的集合(A collection of name/value pairs)

JavaScript中解析JSON数据

1.eval()方法 解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下: function toJson(str){ var json = eval('(' + str + ')'); return json;} 2.new Function方法 该方法存在性能和安全方面的问题,不建议使用. function toJson(str){ var json = (new Function("return " + str))(); return json;}

pyspider示例代码二:解析JSON数据

本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下比较经典的示例进行简单讲解,希望对新手有一些帮助. 示例说明: pyspider爬取的内容通过回调的参数response返回,response有多种解析方式.1.response.json用于解析json数据2.response.doc返回的是PyQuery对象3.response.etree返回的

Android中使用Gson解析JSON数据的两种方法

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二种类型是序列(sequence),也就是若干个相关的数据按照一定顺序并列在一起,又叫做数组