深入分析jquery解析json数据

我们先以解析上例中的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.xxx.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，十分方便。

赞 (0)

相关推荐

  • 数据类型和Json格式分析小结

    1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如"北京"这个单独的词. 第二种类型是sequence(序列),也就是若干个相关的数据按照一定顺序并列在一起,又叫做array(数组)或List(列表),比如"北京,东京". 第三种类型是

  • Js从头学起（基本数据类型和引用类型的参数传递详细分析）

    1.基本数据类型传递参数: 复制代码 代码如下: funciton addTen(num){ num+=10; return num; } var count=20; var result=addTen(count); alert(count);//20 alert(resullt);//30 执行结果是:20和30.在这段代码中,将变量count当做参数传递给了函数addTen,也就是相当于将变量count的值复制给了函数addTen的参数.这时addTen的参数num可以看做是函数内部的一个

  • javascript多种数据类型表格排序代码分析

    中文汉字排序. 中英文混合排序. 数据大小排序. 文件类型排序(后缀名排序) 日期时间排序. 价格排序. 中文混合数字排序; 使用方法:文档载入后new tableListSort(arguments,arguments). 接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}}:对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后

  • jquery处理json数据实例分析

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • js下获取div中的数据的原理分析

    js下获取div中的数据的原理分析

    关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用 document.getElementById("text").textContent 用于在

  • 利用Javascript仿Excel的数据透视分析功能

    利用Javascript仿Excel的数据透视分析功能

    什么是数据透视分析? 数据透视分析就是要在 不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融 等方面十分有用,常常会在一些管理软件中使用. 接下来使用Excel介绍了什么是数据透视分析和数据透视表. 下面我使用 Excel的数据透视表 来分析 iPhone手机2013,2014 和2015 年在中国和美国的销售量数据,以总结iPhone手机的销售趋势. 申明:所有数据都是自己编造的,无任何参考价值. Excel 数据透视表和数据透

  • json格式数据分析工具PageElement类分享(仿Session写法)

    测试例: 复制代码 代码如下: PageElement pe = new PageElement();pe.LoadDataFromJsonString("[{\"A\":\"123\",\"B\":\"abc\"}]");Console.WriteLine(pe["A"]); --输出123pe["B"]=1000;Console.WriteLine(pe[&quo

  • 基于JavaScript 数据类型之Boolean类型分析介绍

    基于JavaScript 数据类型之Boolean类型分析介绍

    今天我们说的是数据类型中的一种Boolean类型,它返回true和false两个字面值,需要注意的是字面值是区分大小写的,也就是除了小写 其他的都只是标识符. 下面主要说的是各种数据类型以及对应的转化规则: 数据类型 转化为true的值 转化为false的值 -------------------------------------------------------------------------------- Boolean                true            

  • jQuery解析json数据实例分析

    jQuery解析json数据实例分析

    本文实例分析了jQuery解析json数据的方法.分享给大家供大家参考,具体如下: 先来看看我们的Json数据格式: [ {id:01,name:"小白",old:29,sex:"男"}, {id:02,name:"小蓝",old:29,sex:"男"}, {id:03,name:"小雅",old:29,sex:"男"} ] 为了消除乱码问题,我们设置一个过滤器(代码片段) public

  • 深入分析jquery解析json数据

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

  • jquery解析JSON数据示例代码

    这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 代码如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value

  • Jquery解析json数据详解

    最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上. 首先简单介绍一下getJson方法 Jquery.getJson(url,[data],[callback]) url:发送请求地址.data:待发送 Key/value 参数.callback:载入成功时回调函数. 下面是实

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

    本文实例讲述了jquery解析json格式数据的方法.分享给大家供大家参考,具体如下: json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 一.jQuery解析Json数据格式: 使用这种方法,你必须在Ajax请求中设置参数: dataType: "json" 获取通过回调函数返回的数据并解析得到我们想要的值,看源码: jQuery.ajax({ url: full_url, dataType

  • Jquery解析Json格式数据过程代码

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

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

    本文实例讲述了jQuery解析json格式数据的方法.分享给大家供大家参考,具体如下: 我用的jquery版本是1.7.2,整合了json数据的解析功能,很早的版本是没有的,我记得那个时候,要么用js的for in来读取json字符串里面的数据,要么加载一个专门用来解析json字符串的JS文件. 例子: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js&qu

  • jQuery解析json格式数据示例

    本文实例讲述了jQuery解析json格式数据.分享给大家供大家参考,具体如下: var arr1 = [ "one", "two", "three", "four", "five" ]; $.each(arr1, function(){ alert(this); }); 输出: one   two  three  four   five var arr2 = [[1, 2, 3], [4, 5, 6],

  • jQuery ajax json 数据的遍历代码

    先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

  • jQuery解析Json实例详解

    jQuery解析Json实例详解

    本文实例讲述了jQuery解析Json的方法.分享给大家供大家参考,具体如下: 前言 在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. 先明确2个概念例如: JSON字符串: 复制代码 代码如下: var str1 = '{ "name": "deyuyi", "sex": "man"

随机推荐