jQuery AJAX捕获状态代码错误

I am trying to catch specific response errors using jQuery's $.ajax.

我正在尝试使用jQuery的$.ajax捕捉特定的响应错误。

When there is an 500 or 404 error code, instead of running the status code functions, it runs the error function and I get an alert box instead of what is supposed to happen

当有500或404错误代码时，它不是运行状态码函数，而是运行错误函数，我得到一个警告框，而不是应该发生的事情

Here is what my code looks like

下面是我的代码。

// get page data
getPageData: function(url, callback) {

    url = ajaxLoader.getURL(url);

    $.ajax({
        url: url,
        type: 'get',
        data: {_ajax_loader: 1},
        error: function(xhr, status) {
            alert('There was a problem loading that page. You may need to refresh.');
        },
        statusCode: {
                404: function(response) {
                    ajaxLoader.fetchPage('/missing');
                },
                500: function(response) {
                    ajaxLoader.fetchPage('/error'); 
                }
            }           
    }).done(callback);
},

3 个解决方案

#1

This is by design. error is executed when an error is returned by the server. Further, the functions defined in statusCode also called as well. The same applies for complete and success handlers.

这是通过设计。当服务器返回错误时，将执行错误。此外，statusCode中定义的函数也被调用。这同样适用于完整的和成功的处理程序。

You could modify your error handler not to run when the error code is already defined in statusCode.

当错误代码已经在statusCode中定义时，可以修改错误处理程序，使其不运行。

$.ajax({
    url: '/echo',
    type: 'get',
    success: function() {
        console.log('ajax.success');
    },
    error: function(xhr, status) {
        // check if xhr.status is defined in $.ajax.statusCode
        // if true, return false to stop this function
        if (typeof this.statusCode[xhr.status] != 'undefined') {
            return false;
        }
        // else continue
        console.log('ajax.error');
    },
    statusCode: {
        404: function(response) {
            console.log('ajax.statusCode: 404');
        },
        500: function(response) {
            console.log('ajax.statusCode: 500');
        }
    }
});

Demo

演示

#2

-1

It will execute both the error and appropriate StatusCode function.

它将执行错误和适当的StatusCode函数。

The only issue with your code is that in your StatusCode functions, you have the argument of response (which I assume is the argument for the success function), when it should match the error function arguments, as follows:

代码的唯一问题是，在StatusCode函数中，当它与error函数参数相匹配时，会有response参数(我假设它是success函数的参数)，如下所示:

// get page data
getPageData: function(url, callback) {

    url = ajaxLoader.getURL(url);

    $.ajax({
        url: url,
        type: 'get',
        data: {_ajax_loader: 1},
        error: function(xhr, status) {
            alert('There was a problem loading that page. You may need to refresh.');
        },
        statusCode: {
            404: function(xhr, status) {
                ajaxLoader.fetchPage('/missing');
            },
            500: function(xhr, status) {
                ajaxLoader.fetchPage('/error'); 
            }
        }           
    }).done(callback);
},

With this, if a 404 or 500 is received, both the error function and the 404/500 function will execute. If you instead desire to have only the 404/500 function execute, and the error function will only execute if the returned status is not 404 or 500, you can do this as follows:

这样，如果接收到404或500，错误函数和404/500函数都将执行。如果您希望只执行404/500函数，并且只有在返回的状态不是404或500时才执行错误函数，您可以这样做:

// get page data
getPageData: function(url, callback) {

    url = ajaxLoader.getURL(url);

    $.ajax({
        url: url,
        type: 'get',
        data: {_ajax_loader: 1},
        error: function(jqXHR, status) {
            switch (jqXHR.status) {
                case 404:
                    ajaxLoader.fetchPage('/missing');
                    break;
                case 500:
                    ajaxLoader.fetchPage('/error');
                    break;
                default:
                    alert('There was a problem loading that page. You may need to refresh.');
            }
        }         
    }).done(callback);
},

#3

-2

$.ajax has success and error functions, so you can handle it with jqXHR defined for both.

美元。ajax具有成功和错误函数，因此您可以使用为两者定义的jqXHR来处理它。

On success:

成功:

success: function(data, status, jqXHR) {
        switch(jqXHR.status){
           case 200:
                    //status ok
                    break;
           case 206:
                    //Partial Content
                    //awesome code for handle it
                    break;

        }
    }

On error:

错误:

error: function(jqXHR, status, errorThrown) {
        switch(jqXHR.status){
           case 400:
                    //Bad Request
                    //awesome code for handle it
                    break;
           case 404:
                    //Not Found
                    //awesome code for handle it
                    break;

        }
    }

Here all status codes

这里所有的状态码

#1