如何使用jQuery获取HTTP状态码？

Question

我想要检查一个页面是否返回状态码 401。这个可能吗？

以下是我的尝试，但它只返回0。

$.ajax({
    url: "http://my-ip/test/test.php",
    data: {},
    complete: function(xhr, statusText){
    alert(xhr.status); 
    }
});

- horgen

---

请检查回调函数的第二个参数statusText的值。 - Jimmy

这会弹出“需要授权”的警告。我可以处理它，但是401警告会更好 ;) - horgen

Answer 1

使用 jQuery 的 $.ajax() 方法可以实现这一点。

$.ajax(serverUrl, {
   type: OutageViewModel.Id() == 0 ? "POST" : "PUT",
   data: dataToSave,
   statusCode: {
      200: function (response) {
         alert('1');
         AfterSavedAll();
      },
      201: function (response) {
         alert('1');
         AfterSavedAll();
      },
      400: function (response) {
         alert('1');
         bootbox.alert('<span style="color:Red;">Error While Saving Outage Entry Please Check</span>', function () { });
      },
      404: function (response) {
         alert('1');
         bootbox.alert('<span style="color:Red;">Error While Saving Outage Entry Please Check</span>', function () { });
      }
   }, success: function () {
      alert('1');
   },
});

- Ravi Mittal

---

将400更改为401。 - Mike Chamberlain

@StuckBetweenTrees 这有什么关系吗？ - superhero

请注意，代码200（成功）的参数是数据，而其他（失败）则为jqXHR。 - Nick Tsai

这正是我需要处理Ajax状态代码的东西。 - Luqman Cheema

Answer 2

第三个参数是XMLHttpRequest对象，因此您可以随心所欲地做任何事情。

$.ajax({
  url  : 'http://example.com',
  type : 'post',
  data : 'a=b'
}).done(function(data, statusText, xhr){
  var status = xhr.status;                //200
  var head = xhr.getAllResponseHeaders(); //Detail header info
});

- b123400

---

它返回了这个：XMLHttpRequest无法加载http://example.com/。请求的资源上没有“Access-Control-Allow-Origin”头。因此，不允许来自“http://stackoverflow.com”的访问。 - sidney

你需要启用CORS处理来解决“Access-Control-Allow-Origin”问题。根据你所处理的项目类型，如果API位于不同的域中且不允许跨域请求，则可能无法简单地解决此问题。 - Anjan Biswas

@Annjawn 如何处理CORS，因为如果我使用Php进行相同的API调用，它不会给出任何CORS错误，但是如果我使用ajax进行相同的API调用，它会给出CORS错误。请告诉我如何处理。 - MD Shahrouq

如果状态码是400（可能也包括其他非200的代码），这将无法正常工作。 - Johann

Answer 3

使用错误回调函数。

例如：

jQuery.ajax({'url': '/this_is_not_found', data: {}, error: function(xhr, status) {
    alert(xhr.status); }
});

将会弹出 404 提示框

- baloo

---

确实是这样。我对jQuery有点陌生。但是401状态怎么办？我该如何将状态保存到变量中？o_O - horgen

它会以同样的方式显示401。 你想如何处理这个错误？ - baloo

如果是401错误，请不要将用户重定向到此页面。只有在页面未找到（404）时，才会触发该错误提示。 - horgen

在 Firefox 中测试过，它也捕获了 401 错误，但可能并非所有浏览器都如此。 - baloo

Answer 4

我认为你还应该实现$.ajax方法的错误函数。

error(XMLHttpRequest, textStatus, errorThrown)函数

如果请求失败，将调用该函数。该函数将传递三个参数：XMLHttpRequest对象，描述发生的错误类型的字符串和一个可选的异常对象（如果有）。第二个参数可能的值（除了null）是"timeout"、"error"、"notmodified"和"parsererror"。

$.ajax({
    url: "http://my-ip/test/test.php",
    data: {},
    complete: function(xhr, statusText){
        alert(xhr.status); 
    },
    error: function(xhr, statusText, err){
        alert("Error:" + xhr.status); 
    }
});

- GvS

---

谢谢，但是complete函数只会返回0。是否可能获取到401错误代码？ - horgen

你确定当服务器返回HTTP 401（未经授权）时会调用complete吗？我虽然没有测试过，但我希望会调用error。 - GvS

类型：Function(jqXHR jqXHR，String textStatus)请求完成后（在成功和错误回调执行之后）要调用的函数。该函数传递两个参数：jqXHR（在jQuery 1.4.x中为XMLHTTPRequest）对象和表示请求状态的字符串（“success”，“notmodified”，“error”，“timeout”，“abort”或“parsererror”）。从jQuery 1.5开始，complete设置可以接受一个函数数组。每个函数将依次被调用。这是一个Ajax事件。 - pshirishreddy

Answer 5

我找到了一个解决方法，您可以简单地使用状态码来检查服务器响应代码。

例子:

$.ajax({
type : "POST",
url : "/package/callApi/createUser",
data : JSON.stringify(data),
contentType: "application/json; charset=UTF-8",
success: function (response) {  
    alert("Account created");
},
statusCode: {
    403: function() {
       // Only if your server returns a 403 status code can it come in this block. :-)
        alert("Username already exist");
    }
},
error: function (e) {
    alert("Server error - " + e);
} 
});

- Jigar Trivedi

---

如果响应不成功且响应状态码甚至不是 403，则进入错误块。 - Jigar Trivedi

Answer 6

$.ajax({
    url: "http://my-ip/test/test.php",
    data: {},
    error: function(xhr, statusText, errorThrown){alert(xhr.status);}
});

- vartec

Answer 7

我将jQuery Ajax封装到一个方法中：

var http_util = function (type, url, params, success_handler, error_handler, base_url) {

    if(base_url) {
        url = base_url + url;
    }

    var success = arguments[3]?arguments[3]:function(){};
    var error = arguments[4]?arguments[4]:function(){};



    $.ajax({
        type: type,
        url: url,
        dataType: 'json',
        data: params,
        success: function (data, textStatus, xhr) {

            if(textStatus === 'success'){
                success(xhr.code, data);   // there returns the status code
            }
        },
        error: function (xhr, error_text, statusText) {

            error(xhr.code, xhr);  // there returns the status code
        }
    })

}

用法：

http_util('get', 'http://localhost:8000/user/list/', null, function (status_code, data) {
    console(status_code, data)
}, function(status_code, err){
    console(status_code, err)
})

- aircraft

Answer 8

使用jQuery get v.3.3.1。

var reqUrl = '/your/web/url';
$.get(reqUrl, function(data, status, xhr){
       console.log("Data: " + JSON.stringify(data) + "\nStatus Code: " + xhr.status); 
}, 'json');

- Johan

Answer 9

我在使用ajax + jQuery v3时遇到了一些问题，主要是从JSON API中获取响应状态码和数据。jQuery.ajax只有在状态成功时才解码JSON数据，并且根据状态码交换回调参数的顺序。非常让人头痛。

最好的方法是调用.always链方法并进行一些清理工作。这是我的代码。

$.ajax({
        ...
    }).always(function(data, textStatus, xhr) {
        var responseCode = null;
        if (textStatus === "error") {
            // data variable is actually xhr
            responseCode = data.status;
            if (data.responseText) {
                try {
                    data = JSON.parse(data.responseText);
                } catch (e) {
                    // Ignore
                }
            }
        } else {
            responseCode = xhr.status;
        }

        console.log("Response code", responseCode);
        console.log("JSON Data", data);
    });

- Phil