JQuery解析JSON資料

標籤：div   comment   tle   簡單的   item   過程   嘻嘻   回呼函數   eof   

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

擷取JSON資料，在jQuery中有一個簡單的方法 $.getJSON() 可以實現。

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

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，十分方便。

上例的運行效果：

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

JQuery解析JSON資料