jQuery+ajax での getJSON() の使用例

例
test.js から JSON データをロードし、JSON データ内の名前フィールド データを表示します:

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

定義と使用法
HTTP GET リクエストを通じて JSON データをロードします。

jQuery 1.2 では、「myurl?callback=?」などの JSONP 形式のコールバック関数を使用して、他のドメインから JSON データをロードできます。 jQuery は、コールバック関数を実行するために、? を正しい関数名に自動的に置き換えます。 注: この行以降のコードは、このコールバック関数が実行される前に実行されます。

構文
jQuery.getJSON(url,[data],[callback])

パラメータの説明
url ロードされるページの URL アドレス。
data 送信されるキー/値パラメータ。
callback ロードが成功したときに実行されるコールバック関数。

詳細な説明

この関数は、Ajax 関数の短縮形であり、以下と同等です:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

サーバーに送信されたデータは、クエリ文字列として URL に追加できます。 data パラメーターの値がオブジェクト (マップ) の場合、URL に追加される前に文字列に変換され、URL エンコードされます。

コールバックに渡される戻りデータは、JavaScript オブジェクトまたは JSON 構造で定義された配列であり、$.parseJSON() メソッドを使用して解析されます。

その他の例

例 1
Flickr から猫に関する最新の写真 4 枚をロードする JSONP API:

HTML コード:

<div id="images"></div>

jQuery コード:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});

例 2
test.js から JSON をロードするデータ、追加パラメーター、表示JSON データの名前フィールド データ:

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

jQuery+ajax での getJSON() の使用例に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。