bobo使用jQuery解析JSON資料

標籤：blog   http   使用   strong   資料   cti   

上例中得到的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(
                    "<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.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(
                    "<div>" + item.id + "</div>" + 
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div><hr/>");
        });
        });
}

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

上例的運行效果：