在上一篇的初析Struts2中的Ajax開發(fā)實(shí)例中，我們得到了comments對象的JSON數(shù)據(jù)，在本篇中，我們將使用jQuery進(jìn)行數(shù)據(jù)解析。

我們先以解析上例中的comments對象的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è)簡單的方法 $.getJSON() 可以實(shí)現(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.

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

$.each()是用來在回調(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è)是需要遍歷的對象集合(JSON對象集合)，第二個(gè)是用來遍歷的方法，這個(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是請求的地址，function(data){...}就是在請求成功后的回調(diào)函數(shù)，data封裝了返回的JSON對象，在下面的$.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就是對這個(gè)數(shù)組進(jìn)行遍歷，再通過操作DOM插入到合適的地方的。在遍歷的過程中，我們可以很方便的訪問當(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...更多的了解還得參考文檔

原文：http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html

【編輯推薦】

1. jQuery實(shí)現(xiàn)仿百度搜索時(shí)的下拉列表
2. 教你開發(fā)一款極為簡單實(shí)用的jQuery圖表插件
3. jQuery+PHP實(shí)戰(zhàn)實(shí)現(xiàn)瀏覽更多內(nèi)容
4. jQuery實(shí)戰(zhàn)開發(fā)表單驗(yàn)證與自動(dòng)完成提示插件
5. 從零開始學(xué)習(xí)jQuery之必知的工具函數(shù)