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

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

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

{
 "comments": [
  {
   "content": "很不錯嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強"
  }
 ]
}

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

下面引用的是官方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.

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

$.each()是用來在回調函數(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()方法接受兩個參數(shù)，第一個是需要遍歷的對象集合（JSON對象集合），第二個是用來遍歷的方法，這個方法又接受兩個參數(shù)，第一個是遍歷的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){...}就是在請求成功后的回調函數(shù)，data封裝了返回的JSON對象，在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到達JSON數(shù)據(jù)內包含的JSON數(shù)組：

[
 {
  "content": "很不錯嘛",
  "id": 1,
  "nickname": "納尼"
 },
 {
  "content": "喲西喲西",
  "id": 2,
  "nickname": "小強"
 }
]

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

上例的運行結果如下：

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

{
 "comments": [
  {
   "content": "很不錯嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強"
  }
 ],
 "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的時候，function()中的參數(shù)是key和value，十分方便。

上例的運行效果：

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

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

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

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

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

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

例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對象 
//以下其他操作同第一種情況 
$.each(data.root,function(idx,item){ 
if(idx==0){ 
return true;//同countinue，返回false同break 
} 
alert("name:"+item.name+",value:"+item.value); 
}); 
}); 

二、jQuery解析Json對象：

jQuery提供了另一種方法“parseJSON”，這需要一個標準的JSON字符串，并返回生成的JavaScript對象。讓我們來看
看語法：

data = $.parseJSON(string);
看看它是如何運用的到實際開發(fā)中的：

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

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

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

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

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

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

在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans

最新評論