2014/11/11
ajaxの書き方

最近はjQueryのauto completeあたりを使うようにしていますが、$.ajaxの書き方をよくわからなかったから調べてみました。
$.ajaxの書き方
jQuery 1.4以前
1 2 3 4 5 6 7 8 9 | $.ajax({ url: "return_json.php", success: function(data) { alert('success!!'); }, error: function(data) { alert('error!!!'); } }); |
jQuery 1.5以上
1.5.1以降には、jqXHR Objectを返すようになっているので、書き方が変わりました。
1 2 3 4 5 6 7 | $.ajax({ url: "return_json.php", }).success(function(data){ alert('success!!'); }).error(function(data){ alert('error!!!'); }); |
jQuery 1.8以上
jqXHR.success()とjqXHR.error()、jqXHR.complete() が廃止されたから、書き方もそれなりに変更しました。
1 2 3 4 5 6 7 | $.ajax({ url: "return_json.php", }).done(function(data){ alert('success!!'); }).fail(function(data){ alert('error!!!'); }); |
おまけ
debugで指定nodeのhtmlを出力したい
1 | alert($(this).html()); |
selectboxのoptionを全部削除したい
1 | $('#selectbox').children().remove(); |
返す関数でDOM操作をしたい
1 2 3 4 5 6 7 8 9 10 11 12 | $("#selectbox").change(function() { var $self = $(this); $.ajax({ url: "return_json.php", }).done(function(data){ var other_select = $self.parents().parents().find(".other_select"); // var other_select = $this.parents().parents().find(".other_select"); // 返す関数に$thisに使えないから注意 alert('success!!'); }).fail(function(data){ alert('error!!!'); }); }); |
Author Profile

スターフィールド編集部
SHARE