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

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

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

外部jsonファイルを読み込むには、「$.getJSON」メソッドを使用します。

引数 説明
url String リクエストの送信先URL
data(オプション) Map リクエスト先に送信する値
callback(オプション) Function リクエスト成功時のコールバック関数

jsonファイルを読み込むだけの場合は、urlとcallbackだけ指定することが多いです。

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

getJSON()を使って、sample.jsonを読み込みアラート表示する簡単なサンプルです。

sample.json

jQuery

jsonは{名前:値}のセットで記述されています。

受け取ったjsonファイルは、サンプルでは「json」という変数に格納され、「json.名前」で値を取り出すことができます。

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

第二引数dataには、Map型でリクエストパラメータを追加することができ、APIのリクエストパラメータを指定したい時などに使えます。

例えば、dataに{category:"person"}と指定した場合の例です。

jQuery

dataに指定された値は、リクエスト前にURLエンコードされた文字列に変換されurl(http://sample.com/api?)にパラメータとして追加されます。

つまり、「http://sample.com/api?category=person」というURLに対してリクエストがされることになります。