jQuery での getJSON() の使用例

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

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

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

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

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

文法
jQuery.getJSON(url,[データ],[コールバック])

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

詳細説明

この関数は Ajax 関数の略称であり、以下と同等です:

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

$.ajax({
URL: URL、
データ: データ、
成功: コールバック、
データ型: json
});

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

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

その他の例

例 1
Flickr JSONP API から 4 つの最新の猫の写真を読み込みます:

HTML コード:

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

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){
$("").attr("src", item.media.m).appendTo("#images");
If ( i == 3 ) は false を返します;
});
});

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

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

$.getJSON("test.js", { 名前: "ジョン"、時刻: "午後 2 時" }, function(json){
alert("JSON データ: " json.users[3].name);
});