jQuery を使用した JSON データの解析に関するチュートリアルの例

前回のStruts2でのAjax開発例の事前分析ではコメントオブジェクトのJSONデータを取得しましたが、今回はjqueryを利用してデータ分析をしていきます。

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

上記の例で取得された JSON データは次のとおりで、ネストされた JSON です:

{“comments”:[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]}

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

次の引用は $.getJSON() の公式 API 説明です:

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.

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

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

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() メソッドは 2 つのパラメータを受け取ります。最初のパラメータは必要なオブジェクトのコレクションです。 2 番目はトラバースに使用されるメソッドです。このメソッドは 2 つのパラメータを受け取ります。1 番目はトラバースされたインデックス、2 番目は現在のトラバースされた値です。笑、$.each() メソッドを使用すると、JSON 解析は簡単に解決されます。

function loadInfo() {
$.getJSON(“loadInfo”, function(data) {
$(“#info”).html(“”);//清空info内容
$.each(data.comments, function(i, item) {
$(“#info”).append(
“<p>” + item.id + “</p>” +
“<p>” + item.nickname    + “</p>” +
“<p>” + item.content + “</p><hr/>”);
});
});
}

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

[{“content”:”很不错嘛”,”id”:1,”nickname”:”纳尼”},{“content”:”哟西哟西”,”id”:2,”nickname”:”小强”}]

$.each() メソッドの関数は、この配列を走査し、適切な場所に挿入します。場所のDOMを操作することで。トラバーサル プロセス中に、現在のトラバーサル インデックス (コード内の「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(“<p>” + item.id + “</p>” +“<p>” + item.nickname    + “</p>” +“<p>” + item.content + “</p><hr/>”);});});}

$.each() が Map を走査するとき、function() のパラメータはキーと値であり、これは非常に便利であることに注目する価値があります。

以上がjQuery を使用した JSON データの解析に関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。