jQuery ajax - getJSON() メソッド

jQuery Ajax 参考手帳

例

AJAXリクエストを使用してJSONデータを取得し、結果を出力します：

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

自分で試してみましょう

定義と使用法

HTTP GETリクエストを通じてJSONデータをロードします。

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

文法

jQuery.getJSON(url,data,success(data,status,xhr)})
パラメータ 説明
url 必須。リクエストを送信する哪个 URLを定義します。
data 選択可。サーバーに送信されるデータを定義します。
success(data,status,xhr)}

任意。指定了请求成功时运行的函数。

额外的参数：

  • response - 请求的结果数据を含みます
  • status - 请求の状態を含みます
  • xhr - XMLHttpRequestオブジェクトを含みます

詳細説明

この関数は短縮されたAjax関数で、以下に等価です：

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

サーバーに送信されるデータは、URLの後ろにクエリストリングとして追加されます。もし data パラメータの値がオブジェクト（マッピング）の場合、URLに追加される前に文字列に変換され、URLエンコードされます。

に渡されます callback の返却データは、JavaScriptオブジェクトまたはJSON構造で定義された配列であり、$.parseJSON()メソッドで解析されます。

例

test.jsからJSONデータをロードし、JSONデータのnameフィールドのデータを表示します：

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

さらに多くの例

例1

Flickr JSONP APIから猫に関する最新の4枚の画像をロードします：

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データのnameフィールドのデータを表示します：

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

jQuery Ajax 参考手帳