jQuery Ajax失败时成功回调

jQuery Ajax success callback on failure

本文关键字：成功 回调 失败 Ajax jQuery      更新时间：2023-09-26

我正在制作一个带有成功、失败和状态代码处理程序的ajax post请求。但是，当请求失败并出现400错误时，仍然会调用成功函数的一部分。有人能告诉我为什么吗?

$.ajax({
        type: "POST",
        url: saveToGetTalentUrl.url,
        data: JSON.stringify(candidateList),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("#save_to_getTalent").replaceWith("Saved to getTalent");
            alert("New User " + response.candidate.full_name + " created successfully");
            console.log(msg);
            //normalExec(response, msg);
        },
        error: function (errormessage) {
            console.log(errormessage);
        },
        statusCode: {
            400:function(){
                alert(errors.err400);
            },
            401:function(){
                alert(errors.err401);
            },
            403:function(){
                alert(errors.err403);
            },
            500:function(){
                alert(errors.err500);
            }
        }
    });
}

当呼叫失败时，显示来自statusCode的错误，并从error函数记录错误，但同时也调用$("#save_to_getTalent").replaceWith("Saved to getTalent");行。我不明白为什么

尝试设置async: true，看看会发生什么

参见ajax的jQuery文档中的这一部分:

async(默认:true)

类型:布尔

默认情况下，所有请求都是异步发送的(即默认设置为true)。如果需要同步请求，请将此选项设置为false。跨域请求和dataType: "jsonp"请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。从jQuery 1.8开始，不支持在jqXHR ($.Deferred)中使用async: false;你必须使用成功/错误/完成回调选项，而不是jqXHR对象的相应方法，如jqXHR.done()。

因此，默认情况下请求(async: true)是一个接一个发送的，而不是全部一起发送。如果POST需要一段时间，您可能会看到回调函数在 POST请求完全返回之前执行。当success的第一行被执行时，它会被阻塞，因为你会弹出一个对话框;同时执行statusCode部分;它继续到最后，因为没有任何阻塞。

用对话框调试不是最好的解决方案，因为它总是阻塞;你可以尝试改变一些元素的值来查看执行顺序，比如改变一个<input>的值，附加一个数字来查看整个数字字符串是否改变，看看success和statusCode是否存在竞争条件。

类似:

$.ajax({
    data:
    url:
    success: function(returned, status, xhr) {
        $('#testInput').val($('#testInput').val() + "1");
    },
    error: function (errormessage) {
        $('#testInput').val($('#testInput').val() + "2");
    },
    statusCode: {
        400:function(){
            $('#testInput').val($('#testInput').val() + "3");
        },
        401:function(){
            $('#testInput').val($('#testInput').val() + "4");
        },
        403:function(){
            $('#testInput').val($('#testInput').val() + "5");
        },
        500:function(){
            $('#testInput').val($('#testInput').val() + "6");
        }
    }
});

相关文章：