$.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読み込みのサンプル2
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読み込みに使用する主なオプション