【超簡単】jQueryでJSONを読み込む方法【コピペOK】

jQueryを使ってJSONファイルを読み込む方法

事前にjQueryは読み込んでおいてください、jQueryを使ってJSONファイルを読み込む方法2パターンあります、下記の通りです。

• $.ajax()
• $.getJSON()

$.ajax()を使って読み込む

$.ajax({ // json読み込み開始
  type: 'GET',
  url: 'ここにjsonファイルのパス',
  dataType: 'json'
})
.then(
  function(json) { // jsonの読み込みに成功した時
    console.log('成功');
  },
  function() { //jsonの読み込みに失敗した時
    console.log('失敗');
  }
);

3行目に任意のJSONファイルパスを指定してあげればすぐに使えます、簡単ですね。読み込み成功、失敗時の分岐処理を6行目のthen(成功したとき,失敗した時);で行っています。

$.getJSON()を使って読み込む

$.getJSON('ここにjsonファイルのパス') // json読み込み開始
  .done(function(json){ // jsonの読み込みに成功した時
    console.log('成功');
  })
  .fail(function(){ // jsonの読み込みに失敗した時
    console.log('失敗');
  })
  .always(function(){ // 成功/失敗に関わらず実行
    console.log('必ず実行される');
  });

1行目に任意のJSONファイルパスを指定してあげればすぐに使えます、これも超簡単ですね。$.getJSON()は前述した$.ajax()の簡略版といったところでしょうか、かなりわかりやすい記述となっているのがわかります。

大きな差はありませんので、使いやすい方を使えばいいかと思います。ちなみに私は$.ajax()派です。

JSONが上手く読み込めない場合

コードをコピペして解説通りやったのに「JSONが読み込めない」という方は【初心者向け】JSでJSONが読み込めない!?エラーの原因はこれを読んでみて下さい、JSONはデリケードなので些細なミスがトラブルに繋がります。

jQuery（javascript）とJSONはかなり扱いやすく実用性の高いコンビなので、この機会にしっかり学習できると今後必ず役に立つと思います、という事で今回は以上になります。