Jquery如何解析JSON数据


来源：   时间：2013-09-05 20:25:05   阅读数：26148

分享到： 1



[导读]


用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。 
这里首先给出JSON字符串集，字符串集如下： 
代码如下:

 代码如下

复制代码

var data=" 
 { 
 root: 
 [ 
 {name:'1',value:'0'}, 
 {name:'6101',value:'北京市'}, 
 {name:'6102',value:'天津市'}, 
 {name:'6103',value:'上海市'}, 
 {name:'6104',value:'重庆市'}, 
 {name:'6105',value:'渭南市'}, 
 {name:'6106',value:'延安市'}, 
 {name:'6107',value:'汉中市'}, 
 {name:'6108',value:'榆林市'}, 
 {name:'6109',value:'安康市'}, 
 {name:'6110',value:'商洛市'} 
 ]
 }";

这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。 
1.对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval（)中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：

 代码如下

复制代码

var dataObj=eval（"("+data+")");//转换为json对象 
 alert(dataObj.root.length);//输出root的子对象数量 
 $.each(dataObj.root,fucntion(idx,item){ 
 if(idx==0){ 
 return true; 
 } 
 //输出每个root子对象的名称和值 
 alert("name:"+item.name+",value:"+item.value); 
 })

注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。 
2.对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
 
获取JSON数据，在jQuery中有一个简单的方法 $.getJSON() 可以实现。
下面引用的是官方API对$.getJSON()的说明：

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
 urlA string containing the URL to which the 
 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.php100.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/>");
         });
         });
 }