失敗時的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");
        }
    }
});