深入分析jquery解析json數(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.xxx.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,十分方便。
- jquery eval解析JSON中的注意點(diǎn)介紹
- jQuery怎么解析Json字符串(Json格式/Json對象)
- js/jquery解析json和數(shù)組格式的方法詳解
- jquery解析json格式數(shù)據(jù)的方法(對象、字符串)
- Jquery解析json字符串及json數(shù)組的方法
- jQuery解析Json實(shí)例詳解
- Jquery解析json數(shù)據(jù)詳解
- jQuery解析json數(shù)據(jù)實(shí)例分析
- jQuery解析json格式數(shù)據(jù)簡單實(shí)例
- Jquery解析Json格式數(shù)據(jù)過程代碼
- jQuery解析json格式數(shù)據(jù)示例
相關(guān)文章
頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別說明
本篇文章主要是對頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery結(jié)合css實(shí)現(xiàn)返回頂部功能
在本篇文章里小編給大家整理了一篇關(guān)于jquery結(jié)合css實(shí)現(xiàn)返回頂部功能的相關(guān)文章,有興趣的朋友們可以實(shí)例測試下。2021-08-08JQuery解析HTML、JSON和XML實(shí)例詳解
JQuery具有強(qiáng)大的解析數(shù)據(jù)的能力,本文詳細(xì)介紹HTML、JSON和XML格式的文件的數(shù)據(jù)如何解析2014-03-03利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡易的計(jì)時(shí)器示例代碼
這篇文章主要給大家介紹了關(guān)于利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡易的計(jì)時(shí)器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-12-12jQuery學(xué)習(xí)筆記 操作jQuery對象 屬性處理
HTML文檔,不但有一系列語義標(biāo)簽,每個(gè)標(biāo)簽下屬還有一系列屬性節(jié)點(diǎn)。自然我們也想去操作這些屬性節(jié)點(diǎn)。格式仍然為$(selector).方法2012-09-09