jQueryのAjax処理について


jQueryのAjax処理についての基本的な紹介です。

🐹 書き方

jQuery 1.8以降では次のように記述します。

$.ajax({
url: "http://jsrun.it/assets/E/H/Z/t/EHZt3"
}).done(function(data) { // 成功時
alert('success!');
}).fail(function(data) { // 失敗時
alert('error!');
}).always(function(data) { // 常に実行
alert('always!');
});

defferredを使うと次のように記述できます。

var Example = {
search: function(query) {
var defer = $.Deferred();
$.ajax({
url: "http://example.com/search.json",
method: 'POST', // GET, PUT等定義変更
data: {
q: query
},
dataType: 'jsonp',
success: defer.resolve,
error: defer.reject
});
return defer.promise();
}
};
$('#example-button').on('click', function() {
Example.search('search-word').done(function(data) {
$(data.results).each(function(k, v){
$('#result').append(v.text + '<br/>');
});
});
});

🚕 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)