$.getJSON()

http://api.jquery.com/jQuery.getJSON/

HTTPのGET通信を行い、json形式に変換されたデータをサーバから受け取ります。

$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) 1.0追加
デモ

$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) 1.0追加

戻り値:jqXHR

引数	説明
url	リクエストの送信先URLを指定します。
[data]	サーバに送信する値をマップ値で指定します。サーバーに送信される前にURLエンコードが施されたURLクエリーの文字列に変換されます。
[success (data, textStatus, jqXHR)]	リクエスト成功時の処理を関数として指定します。関数の引数としてdata, textStatus, jqXHRの3つの値を受け取る事が出来ます。

$.getJSONは$.ajaxの略記です。$.ajax関数で次のように指定した処理と同じ処理を実行します。

$.ajax({
  //type: オプションは$.ajaxの初期値で"GET"です。
  url: url,
  dataType: 'json',
  data: data,
  success: success,
});

例えば、サーバが下記のようなjsonを返してくれる場合、successに指定する関数は次のように実装を行います。

サーバが返すjson値

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

クライアント側

$.getJSON(
  'ajax/test.json',
  function(data) {
    var items = [];

    //dataがサーバから受け取るjson値
    $.each(data, function(key, val) {
      items.push('<li id="' + key + '">' + val + '</li>');
    });

    //サーバから受け取った値をULリストにしてBody内に挿入
    $('<ul/>', {
      'class': 'my-new-list',
      html: items.join('')
    }).appendTo('body');
  }
);

デモ

Flickrのjsonp APIを利用して写真データを取得して並べる処理を行なっています。 (jQuery公式サイトではシアトルのレーニア山の画像を指定していますが、ここでは富士山の画像を指定してみました。)

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
  <div id="images">
</div>
<script>
$(document).ready(function(){
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
      tags: "mount fuji", //富士山を指定
      tagmode: "any",
      format: "json"
    },
    function(data) {
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 2 ) return false;
      });
    });
  });
</script>
</body>
</html>