失败时的jQuery Ajax成功回调

Question

我正在用成功，失败和状态代码处理程序发出ajax发布请求。 但是，当请求因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);
            }
        }
    });
}

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

Answer 1

尝试设置async: true以查看会发生什么。

请参阅jQuery文档中有关ajax这一部分：

异步（默认值：true）

类型：布尔

默认情况下，所有请求都是异步发送的（即默认情况下设置为true）。 如果需要同步请求，请将此选项设置为false。 跨域请求和dataType：“ jsonp”请求不支持同步操作。 请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。 从jQuery 1.8开始，不建议使用async：false和jqXHR（$ .Deferred）； 您必须使用成功/错误/完成回调选项，而不要使用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");
        }
    }
});