`

使用jQuery解析JSON数据

 
阅读更多

在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析。

我们先以解析上例中的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如下:

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

上例的运行效果:

jQuery很强大,so...更多的了解还得参考文档,(ˇˍˇ) 想~

分享到:
评论

相关推荐

    用jquery解析JSON数据的方法

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

    用jquery解析JSON数据的方法20110227

    用jquery解析JSON数据的方法20110227用jquery解析JSON数据的方法20110227

    jquery解析JSON数据的方法.docx

    jquery解析JSON数据的方法.docx

    Jquery解析json数据详解

    最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上。...

    Jquery解析Json数据,实现级联菜单

    jquery操作Dom对象,解析json数据,实现级联菜单,里面用到了事件绑定

    使用JQuery实现从JSON对象转换为form提交数据

    使用JQuery实现从JSON对象转换为form提交数据

    Jquery解析json

    本实例是结合struts2 jquery来接受后台的json数据

    jQuery解析json格式数据示例

    主要介绍了jQuery解析json格式数据,涉及jQuery针对json格式数据元素遍历相关操作技巧,需要的朋友可以参考下

    jQuery解析json数据实例分析

    主要介绍了jQuery解析json数据的具体实现方法,结合实例形式较为详细的分析了jQuery解析json格式数据的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    Jquery解析Json数据

    NULL 博文链接:https://zmfkplj.iteye.com/blog/350694

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

    一、jQuery解析Json数据格式: 使用这种方法,你必须在Ajax请求中设置参数: dataType: “json” 获取通过回调函数返回的数据并解析得到我们想要的值,看源码: jQuery.ajax({ url: full_url, dataType: json, ...

    jQuery解析json格式数据简单实例

    主要介绍了jQuery解析json格式数据的方法,结合实例分析了使用jQuery1.7.2版本的方法解析json格式数据的技巧,需要的朋友可以参考下

    深入分析jquery解析json数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。 JSON数据如下,是一个嵌套JSON: 代码如下: {“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”...

    jquery解析JSON数据示例代码

    这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式...

    利用jQuery解析获取JSON数据

    JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的。从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? ...

Global site tag (gtag.js) - Google Analytics