jQuery Ajax和$.ajax jqXHR实现教程

作者：袖梨 2022-11-14

普通的ajax事件，在开发过程中可能已经写过一个success，在后续的开发中可能我不想动之前写的success方法，想要重启一个success比如下面代码：

代码如下 复制代码

$('.btn').click(function () {
$.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize(),
success : function (data) {
console.log(data + '1');
},
success : function (data) {
console.log(data + '2');
}
});
});
测试结果是：

{"user":"admin","email":"[email protected]"}2

我们发现后面的success方法覆盖了前面的success方法，测试失败。那么有没有能够写多个success的方法呢？既然jquery能在全球广泛的被采用，这点小需求还是能满足的，这里就用到了今天的重点：jqXHR，先看一段代码了解什么事jqXHR

代码如下 复制代码

$('.btn').click(function () {
var jqXHR = $.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize()
});
jqXHR.success(function (data) {
console.log(data + '1');
});
jqXHR.success(function (data) {
console.log(data + '2');
});

});
结果如下：

{"user":"tuisiyuan","email":"[email protected]"}1
{"user":"tuisiyuan","email":"[email protected]"}2

由上我们不难发现所谓的jqXHR不过就是$.ajax的返回值，而且两个success方法都被顺序的执行了。

随之jquery版本的改善提高，以后jqXHR可能会弃用success，complete，error方法，而改用done，always，fail方法

代码如下 复制代码

$('.btn').click(function () {
var jqXHR = $.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize()
});

//done=>success,always=>complete,fail=>error
jqXHR.always(function (data) {
console.log('always:' + data);
}).done(function (data) {
console.log('done:' + data)
});
jqXHR.done(function (data) {
console.log('done:' + data);
});
jqXHR.fail(function (data) {
console.log('fail:' + data);
});

});

jqXHR可以连缀，执行多个done。

相关文章

精彩推荐