jQueryでjsonファイルを読み込む方法:getJSON()

今回は、jQueryでjsonファイルを読み込む方法を説明します。

JSONファイルを読み込むgetJSON()

getJSON( url [, data] [, callback] )
外部jsonファイルを読み込むには、「$.getJSON」メソッドを使用します。
引数 説明
url String リクエストの送信先URL
data(オプション) Map リクエスト先に送信する値
callback(オプション) Function リクエスト成功時のコールバック関数
jsonファイルを読み込むだけの場合は、urlとcallbackだけ指定することが多いです。

getJSON()をつかったサンプル

getJSON()を使って、sample.jsonを読み込みアラート表示する簡単なサンプルです。 sample.json
{"first_name":"一郎","last_name":"鈴木"}
jQuery
$.getJSON("sample.json", function(json){
    alert(data.last_name + data.first_name);// 鈴木一郎とアラート表示
})
jsonは{名前:値}のセットで記述されています。 受け取ったjsonファイルは、サンプルでは「json」という変数に格納され、「json.名前」で値を取り出すことができます。

リクエスト時にパラメータを追加する

第二引数dataには、Map型でリクエストパラメータを追加することができ、APIのリクエストパラメータを指定したい時などに使えます。 例えば、dataに{category:"person"}と指定した場合の例です。 jQuery
$.getJSON(
  "http://sample.com/api?", 
  {category:person}, 
  function(json){
    //レスポンスに対する処理
  }
)
dataに指定された値は、リクエスト前にURLエンコードされた文字列に変換されurl(http://sample.com/api?)にパラメータとして追加されます。 つまり、「http://sample.com/api?category=person」というURLに対してリクエストがされることになります。