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を使用する。

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読み込みのサンプル2

もう少し詳しく知りたい場合はこちらを参照
jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション