1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法

$.ajaxによるJSON読み込み方法

例えば以下のようなJSONの場合

[
    {
        "version": "1.5",
        "codename": "Cupcake"
    },
    {
        "version": "1.6",
        "codename": "Donut"
    },
    {
        "version": "4.4",
        "codename": "KitKat"
    }
]

$.ajaxでの読み込みは下記のようになる

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  dataType: 'json',
  success: function(json){
    var len = json.length;
    for(var i=0; i < len; i++){
      $("#a").append(json[i].version + ' ' + json[i].codename + '<br>');
    }
  }
});

$.ajaxによるJSONP読み込み方法

例えば以下のようなJSONPの場合

android(
[

    {
        "version": "1.5",
        "codename": "Cupcake"
    },
    {
        "version": "1.6",
        "codename": "Donut"
    },
    {
        "version": "4.4",
        "codename": "KitKat"
    }
]
);

$.ajaxでの読み込みは下記のようになる

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.jsonp',
  dataType: 'jsonp',
  jsonpCallback: 'android',
  success: function(json){
    var len = json.length;
    for(var i=0; i < len; i++){
      $("#b").append(json[i].version + ' ' + json[i].codename + '<br>');
    }
  }
});

jQuery $.ajaxによるJSON・JSONP読み込みのサンプル

注意

JSONファイルは同一ドメイン間でなければ読み込みができないので別ドメインにあるデータを読み込む場合は必ずJSONPの方を利用する。

また、現在ではsuccessやerrorを使用した書き方は好ましくないためthenかdoneを使用する。

thenを使用した場合は第一引数がsuccess、第二引数がerrorになる。

$.ajax({
  url: 'https://iwb.jp/s/js/data.json'
})
.then(
  function(json) {
    for(var i=0; i<json.length; i++) {
      $('#a').append(json[i].version + ' ' + json[i].codename + '<br>');
    }
  },
  function() {
    $('#a').text('ERROR');
  }
);

jQuery $.ajaxによるJSON・JSONP読み込みのサンプル２

doneを使用した場合はこうなる。jQuery公式サイトの例文ではdoneが使用されている。

doneのほうが可読性が良いのでdoneを使用したほうが良い。

$.ajax({
  url: 'https://iwb.jp/s/js/data.json'
}).done(function(json) {
  for(var i=0; i<json.length; i++) {
    $('#a').append(json[i].version + ' ' + json[i].codename + '<br>');
  }
}).fail(function() {
  $('#a').text('ERROR');
});

jQuery $.ajaxによるJSON・JSONP読み込みのサンプル3

もう少し詳しく知りたい場合はこちらを参照

jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション