用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(
“<p>” + item.id + “</p>” +
“<p>” + item.nickname    + “</p>” +
“<p>” + item.content + “</p><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如下：
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(“<p>” + item.id + “</p>” +“<p>” + item.nickname    + “</p>” +“<p>” + item.content + “</p><hr/>”);});});}

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

以上是用jQuery解析JSON資料的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！