json數(shù)據(jù)是我們常用的一種小型的數(shù)據(jù)實(shí)時(shí)交換的一個(gè)東西，他可以利用jquery或js進(jìn)行解析，下面我來(lái)介紹jquery解析json字符串方法。

我們先以解析上例中的comments對(duì)象的JSON數(shù)據(jù)為例，然后再小結(jié)jQuery中解析JSON數(shù)據(jù)的方法。

上例中得到的JSON數(shù)據(jù)如下，是一個(gè)嵌套JSON：

{
 "comments": [
  {
   "content": "很不錯(cuò)嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強(qiáng)"
  }
 ]
}

獲取JSON數(shù)據(jù)，在jQuery中有一個(gè)簡(jiǎn)單的方法 $.getJSON() 可以實(shí)現(xiàn)。

下面引用的是官方API對(duì)$.getJSON()的說(shuō)明：

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.

回調(diào)函數(shù)中接受三個(gè)參數(shù)，第一個(gè)書(shū)返回的數(shù)據(jù)，第二個(gè)是狀態(tài)，第三個(gè)是jQuery的XMLHttpRequest，我們只使用到第一個(gè)參數(shù)。

$.each()是用來(lái)在回調(diào)函數(shù)中解析JSON數(shù)據(jù)的方法，下面是官方文檔：

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()方法接受兩個(gè)參數(shù)，第一個(gè)是需要遍歷的對(duì)象集合（JSON對(duì)象集合），第二個(gè)是用來(lái)遍歷的方法，這個(gè)方法又接受兩個(gè)參數(shù)，第一個(gè)是遍歷的index，第二個(gè)是當(dāng)前遍歷的值。哈哈，有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
 $.getJSON("loadInfo", function(data) {
  $("#info").html("");//清空info內(nèi)容
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

正如上面，loadinfo是請(qǐng)求的地址，function(data){...}就是在請(qǐng)求成功后的回調(diào)函數(shù)，data封裝了返回的JSON對(duì)象，在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到達(dá)JSON數(shù)據(jù)內(nèi)包含的JSON數(shù)組：

[
 {
  "content": "很不錯(cuò)嘛",
  "id": 1,
  "nickname": "納尼"
 },
 {
  "content": "喲西喲西",
  "id": 2,
  "nickname": "小強(qiáng)"
 }
]

$.each()方法中的function就是對(duì)這個(gè)數(shù)組進(jìn)行遍歷，再通過(guò)操作DOM插入到合適的地方的。在遍歷的過(guò)程中，我們可以很方便的訪問(wèn)當(dāng)前遍歷index(代碼中的”i“)和當(dāng)前遍歷的值(代碼中的”item“)。

上例的運(yùn)行結(jié)果如下：

如果返回的JSON數(shù)據(jù)比較復(fù)雜，則只需多些$.each()進(jìn)行遍歷即可，嘿嘿。例如如下JSON數(shù)據(jù)：

{
 "comments": [
  {
   "content": "很不錯(cuò)嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強(qiáng)"
  }
 ],
 "content": "你是木頭人，哈哈。",
 "infomap": {
  "性別": "男",
  "職業(yè)": "程序員",
  "博客": "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數(shù)據(jù)
  $.each(data.infomap,function(key,value){
   $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
  });
  //解析數(shù)組
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

值得注意的是，$.each()遍歷Map的時(shí)候，function()中的參數(shù)是key和value，十分方便。

上例的運(yùn)行效果：

jQuery很強(qiáng)大，so...更多的了解還得參考文檔，(ˇˍˇ） 想～

下面是其他網(wǎng)友的補(bǔ)充：

一、jQuery解析Json數(shù)據(jù)格式：

使用這種方法，你必須在Ajax請(qǐng)求中設(shè)置參數(shù):
1 dataType: "json"
獲取通過(guò)回調(diào)函數(shù)返回的數(shù)據(jù)并解析得到我們想要的值，看源碼：

jQuery.ajax({ 
url: full_url, 
dataType: "json", 
success: function(results) { 
alert(result.name); 
} }); 

通常情況下，你可以從后臺(tái)返回JSON數(shù)據(jù)，前臺(tái)就交給jQuery啦，哈哈??！
jquery異步請(qǐng)求將type（一般為這個(gè)配置屬性）設(shè)為“json”，或者利用$.getJSON()方法獲得服務(wù)器返回，那么就不
需要eval（）方法了，因?yàn)檫@時(shí)候得到的結(jié)果已經(jīng)是json對(duì)象了，只需直接調(diào)用該對(duì)象即可，這里以$.getJSON方法為
例說(shuō)

例1
代碼如下:

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

$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},function(data){ 
//此處返回的data已經(jīng)是json對(duì)象 
//以下其他操作同第一種情況 
$.each(data.root,function(idx,item){ 
if(idx==0){ 
return true;//同countinue，返回false同break 
} 
alert("name:"+item.name+",value:"+item.value); 
}); 
}); 

二、jQuery解析Json對(duì)象：

jQuery提供了另一種方法“parseJSON”，這需要一個(gè)標(biāo)準(zhǔn)的JSON字符串，并返回生成的JavaScript對(duì)象。讓我們來(lái)看
看語(yǔ)法：

data = $.parseJSON(string);
看看它是如何運(yùn)用的到實(shí)際開(kāi)發(fā)中的：

jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
}); 

PS：關(guān)于json操作，這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

最新評(píng)論