jQuery.getJSON(url, [data], [handler])


version 1.0 以降

解説

HTTPリクエスト(GETメソッド)を使用してデータを取得します。
データはJSONとして評価されます。

jQuery.get(url, [data], [handler], [dataType]) のラッパメソッドです。 以下の呼び出しと等価です。

jQuery.get(url, data, callback, "json");

指定したコールバック関数は、通信が成功した場合に実行されます。 通信エラー時、通信完了時のハンドリングを行うには、jQuery.ajax(settings) を使用してください。

JSONP

callbackname=?形式のパラメータを送信クエリに付与すると、別ドメインのデータをJSONPを使用して取得することができます。 "?"の部分は、jQueryが、"jsonp" + 現在時刻文字列 の文字列に置き換えてクエリを送信し、内部でコールバック関数を実行してくれます。

引数

  • url : リクエスト先のURL。
  • [data] : サーバに送信するパラメータ。キーと値のペア(ハッシュ)。(オプション)
  • [callback] : 通信が成功した場合に実行されるコールバック関数。(オプション)
    jQuery.ajax(settings)successオプションに指定するコールバック関数と同等です。このコールバック関数には 2つの引数が渡されます。
    引数 説明
    data JSONオブジェクト
    status リクエスト結果を表す文字列。
    参照:jQuery.ajax(settings)#status

戻り値

  • XMLHttpRequestオブジェクト

例1:サーバからJSONデータを取得し、表示します。

test_json.php

Content-type: application/json; charset=UTF-8

{key1: "value1", key2: "value2"}

$.getJSON(
    "test_json.php",            // リクエストURL
    null,
    function(data, status) {    // 通信成功時にデータを表示
        $("#test1_result").append("----- データ取得結果 -----").append("<br/>");
        for (i in data) {
            $("#test1_result").append(i + ": " + data[i]).append("<br/>");
        }
    }
);

テスト結果 (#test1_result)

例2:Youtubeから検索結果を取得し、表示します。クエリにコールバック関数を指定し、JSONPで取得します。

  • 検索文字列:テスト
  • 最大取得件数:5件
$.getJSON(
    "http://gdata.youtube.com/feeds/api/videos?callback=?",  // リクエストURL
    {                                                        // 送信データ
        "vq": "テスト",            // 検索文字列
        "max-results": 5,         // 最大取得件数
        "alt": "json-in-script"   // jsonp
    },
    function(data, status) {    // 通信成功時にデータを表示
        $("#test2_result").append("----- Youtube検索結果 -----");
        $.each(data.feed.entry, function(i, item){
            var group = item.media$group;

            $("<div/>")
                .append($("<img/>").attr("src", group.media$thumbnail[0].url))
                .append("<br/>")
                .append(item.title.$t)
                .click(function(){window.open(group.media$player[0].url, null)})
            .appendTo("#test2_result");
        });
    }
);

テスト結果 (#test2_result)