json data_jquery を解析する jquery の詳細な分析

まず、上記の例のコメント オブジェクトを解析する JSON データを例にして、jQuery で JSON データを解析する方法をまとめます。

JSON データは次のとおりです。これはネストされた JSON です:

コードをコピーします コードは次のとおりです:

{"コメント":[{"コンテンツ":"とても良い","id":1,"ニックネーム":"ナニ"},{"コンテンツ":"よしよし","id":2 ,"ニックネーム": "小強"}]}

JSON データを取得するには、jQuery に簡単なメソッド $.getJSON() があります。

以下は $.getJSON() の公式 API 説明です:

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

urlリクエストの送信先となる URL を含む文字列。

dataリクエストとともにサーバーに送信されるマップまたは文字列。

success(data, textStatus, jqXHR)リクエストが成功した場合に実行されるコールバック関数。

コールバック関数は 3 つのパラメータを受け取ります。1 つ目は返されたデータ、2 つ目はステータス、3 つ目は jQuery の XMLHttpRequest です。最初のパラメータのみを使用します。

$.each() はコールバック関数で JSON データを解析するために使用されるメソッドです。以下は公式ドキュメントです:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

コレクション反復処理するオブジェクトまたは配列。

callback(indexInArray, valueOfElement)すべてのオブジェクトに対して実行される関数。

$.each() メソッドは 2 つのパラメーターを受け入れます。1 つ目は、走査する必要があるオブジェクト コレクション (JSON オブジェクト コレクション) です。このメソッドは、2 つのパラメーターを受け入れます。トラバースされたインデックス、2 番目は現在のトラバースされた値です。笑、$.each() メソッドを使用すると、JSON 解析は簡単に解決されます。 (*^__^*) ふふふ…

コードをコピーします コードは次のとおりです:

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

" item.id "

" "

" item.nickname "

" "

" item.content "

---

");
});
});
}

上記と同様、loadinfo はリクエストされたアドレス、function(data){...} はリクエストが成功した後のコールバック関数、data は返された JSON オブジェクトを次の $.each(data.comments,function) でカプセル化します。 (i,item){...}) メソッドの data.comments は、JSON データに含まれる JSON 配列に直接到達します:

コードをコピーします コードは次のとおりです:

[{"content":"とても良い","id":1,"ニックネーム":"ナニ"},{"content":"ヨシヨシ","id":2,"ニックネーム":"シャオチャン"}]

$.each() メソッドの関数は、この配列を走査し、DOM を操作して適切な場所に挿入します。トラバーサル プロセス中に、現在のトラバーサル インデックス (コード内の「i」) と現在のトラバーサル値 (コード内の「item」) に簡単にアクセスできます。

上記の例の結果は次のとおりです:

返された JSON データがより複雑な場合は、さらに $.each() を使用してデータを走査してください。たとえば、次の JSON データ:

コードをコピーします コードは次のとおりです:

{"コメント":[{"コンテンツ":"とても良い","id":1,"ニックネーム":"ナニ"},{"コンテンツ":"よしよし","id":2 ,"ニックネーム": "小強"}],

"content":"バカだね、笑","infomap":{"性別":"男性","職業":"プログラマー",
"ブログ":"http://www.xxx.com/codeplus/"},"title":"123 木人"}

js は次のとおりです:

コードをコピー コードは次のとおりです:

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

---

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

---

");
//jquery parses map data
          $.each(data.infomap,function(key,value){
$("#mapinfo").append(key "----" value "

---

");
        });
//Parse array
          $.each(data.comments, function(i, item) {
                $("#info").append(
"

" item.id "

"
"

" item.nickname "

"
"

" item.content "

---

");
        });
        });
}

It is worth noting that when $.each() traverses the Map, the parameters in function() are key and value, which is very convenient.