ajaxの書き方

最近はjQueryのauto completeあたりを使うようにしていますが、$.ajaxの書き方をよくわからなかったから調べてみました。

$.ajaxの書き方

jQuery 1.4以前


$.ajax({
    url: "return_json.php",
    success: function(data) {
       alert('success!!');
    },
    error: function(data) {
       alert('error!!!');
    }
});

$.ajax({

url: "return_json.php",

success: function(data) {

alert('success!!');

error: function(data) {

alert('error!!!');

}

});

jQuery 1.5以上

1.5.1以降には、jqXHR Objectを返すようになっているので、書き方が変わりました。


$.ajax({
    url: "return_json.php",
}).success(function(data){
    alert('success!!');
}).error(function(data){
    alert('error!!!');
});

$.ajax({

url: "return_json.php",

}).success(function(data){

alert('success!!');

}).error(function(data){

alert('error!!!');

});

jQuery 1.8以上

jqXHR.success()とjqXHR.error()、jqXHR.complete() が廃止されたから、書き方もそれなりに変更しました。


$.ajax({
    url: "return_json.php",
}).done(function(data){
    alert('success!!');
}).fail(function(data){
    alert('error!!!');
});

$.ajax({

url: "return_json.php",

}).done(function(data){

alert('success!!');

}).fail(function(data){

alert('error!!!');

});

おまけ

debugで指定nodeのhtmlを出力したい


alert($(this).html());

1	alert($(this).html());

selectboxのoptionを全部削除したい


$('#selectbox').children().remove();

1	$('#selectbox').children().remove();

返す関数でDOM操作をしたい


$("#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!!!');
	});
});