まず、上記の例のコメント オブジェクトを解析する 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.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
