macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

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

JavaScript プログラミング

jQueryを使って簡単にJSONを読み込みたい方向けの記事になります。

コピペで誰でも使えるコードを公開しています、jQueryとJSONを勉強中の方や初心者の方は参考にどうぞ。

JSONって初心者でも作れるくらい構文が簡単なことで有名です。

実は読み込む際もjQueryを使えば簡単なんです。

スポンサードサーチ


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

当たり前の事ですが、事前にjQueryは読み込んでおいてください。

それでは読み込む方法ですが、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(成功したとき,失敗した時);で行っています。

then()の代わりにsuccess:error:を使う方法もありますが非推奨です。

$.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が読み込めない」という方は下記を参考にしてください。

【初心者向け】JSでJSONが読み込めない!?エラーの原因はこれ

最後に、jQueryの読み込み忘れにご注意を。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。