失败时的jQuery Ajax成功回调

Question

I'm making an ajax post request with success, failure and status code handlers. However, when the request fails with a 400 error, part of the success function is still called. Could someone please tell me why?

$.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);
            }
        }
    });
}

When the call fails with a 400 error, the error from statusCode is displayed and the error is logged from the error function, but at the same time, the line $("#save_to_getTalent").replaceWith("Saved to getTalent"); is also called. I dont understand why

Answer 1

Try set async: true to see what happens.

See this part in the jQuery documentation for ajax :

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (ie this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().

So, the request by default ( async: true ) are sent one by one, not all together. If the POST takes a while, you may see the callback function executed before the POST request returned completely. When the first line of success is executed, it is blocked because you have a dialog popped up; meanwhile, the statusCode part is also executed; it continues to the end because nothing is blocking there.

Debug with a dialog is not the best solution because it always blocks; you can try to change some element's value to see the execute order, like changing an <input> 's value, append a number to see if the whole number string changes or not, to see if there is a race condition of success and statusCode .

Something like:

$.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");
        }
    }
});