Analisis mendalam jquery parsing json data

Analisis mendalam jquery parsing json data_jquery

WBOY

Lepaskan： 2016-05-16 16:28:09

asal

1322 orang telah melayarinya

Mula-mula mari kita ambil data JSON yang menghuraikan objek komen dalam contoh di atas sebagai contoh, dan kemudian meringkaskan kaedah menghuraikan data JSON dalam jQuery.

Data JSON adalah seperti berikut, iaitu JSON bersarang:

Salin kod Kod adalah seperti berikut:

{"comments":[{"content":"Sangat bagus","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "Xiaoqiang"}]}

Untuk mendapatkan data JSON, terdapat kaedah mudah $.getJSON() dalam jQuery.

Berikut ialah perihalan API rasmi $.getJSON():

jQuery.getJSON( url, [data,] [kejayaan(data, textStatus, jqXHR)] )

urlSatu rentetan yang mengandungi URL yang permintaan dihantar.

dataPeta atau rentetan yang dihantar ke pelayan dengan permintaan.

kejayaan(data, textStatus, jqXHR)Fungsi panggil balik yang dilaksanakan jika permintaan berjaya.

Fungsi panggil balik menerima tiga parameter Yang pertama ialah data yang dikembalikan, yang kedua ialah status, dan yang ketiga ialah XMLHttpRequest jQuery Kami hanya menggunakan parameter pertama.

$.each() ialah kaedah yang digunakan untuk menghuraikan data JSON dalam fungsi panggil balik Berikut ialah dokumen rasmi:

jQuery.each( koleksi, panggil balik(indexInArray, valueOfElement) )

pengumpulanObjek atau tatasusunan untuk diulang.

panggilan balik(indexInArray, valueOfElement)Fungsi yang akan dilaksanakan pada setiap objek.

Kaedah $.each() menerima dua parameter Yang pertama ialah koleksi objek yang perlu dilalui (kumpulan objek JSON yang kedua ialah kaedah yang digunakan untuk melintasi dua parameter indeks yang dilalui, dan yang kedua ialah nilai yang dilalui semasa. Haha, dengan kaedah $.each(), penghuraian JSON mudah diselesaikan. (*^__^*) Hee hee...

Salin kod Kod adalah seperti berikut:

function loadInfo() {
$.getJSON("loadInfo", fungsi(data) {
$ $("#info").append(
"

" item.id "

"
"

" item.nama panggilan "

" "

" });
});
}

Seperti di atas, loadinfo ialah alamat yang diminta, function(data){...} ialah fungsi panggil balik selepas permintaan berjaya, data merangkum objek JSON yang dikembalikan, dalam $.each(data.comments,function berikut Kaedah data.comments dalam (i,item){...}) terus mencapai tatasusunan JSON yang terkandung dalam data JSON:

Salin kod Kod adalah seperti berikut:

[{"content":"Sangat bagus","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2,"nickname": "Xiaoqiang"}]

Fungsi dalam kaedah $.each() adalah untuk melintasi tatasusunan ini dan kemudian memasukkannya ke tempat yang sesuai dengan mengendalikan DOM. Semasa proses traversal, kita boleh dengan mudah mengakses indeks traversal semasa ("i" dalam kod) dan nilai traversal semasa ("item" dalam kod).

Keputusan contoh di atas adalah seperti berikut:

Jika data JSON yang dikembalikan adalah lebih kompleks, cuma gunakan lebih banyak $.each() untuk melintasinya, hehe. Contohnya, data JSON berikut:

Salin kod Kod adalah seperti berikut:

{"comments":[{"content":"Sangat bagus","id":1,"nickname":"Nani"},{"content":"Yoshiyoshi","id":2 ,"nickname": "Xiaoqiang"}],

"content":"Anda bodoh, haha.","infomap":{"Jantina":"Lelaki","Pekerjaan":"Pengaturcara",

"Blog":"http://www.xxx.com/codeplus/"},"title":"123 Lelaki Kayu"}

js adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Funktion loadInfo() {

$.getJSON("loadInfo", function(data) {

          $("#title").append(data.title "");

           $("#content").append(data.content "");

//jquery analysiert Kartendaten

          $.each(data.infomap,function(key,value){

$("#mapinfo").append(key "----" value "
");

});

//Array analysieren

          $.each(data.comments, function(i, item) {

                $("#info").append(

„“ item.id „
“
„“ item.nickname „
“
"" item.content "
");

});

});

}

Es ist erwähnenswert, dass beim Durchlaufen der Karte durch $.each() die Parameter in function() Schlüssel und Wert sind, was sehr praktisch ist.