Question

在用户输入错误的表单详细信息之后，我对我的REST API发出了Ajax请求，例如：无效的用户名，空白的电子邮件地址等。返回的数据如下：

HTTP 400 Bad Request
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept
{
    "username": [
        "Username already taken."
    ],
    "email": [
        "This field may not be blank."
    ],
    "password1": [
        "This field may not be blank."
    ],
    "password2": [
        "This field may not be blank."
    ]
}

这是我的代码：

console.log(send_data(register_url, data));

function send_data(url, data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
        },

        error: function (xhr) {
        }
    });
}

当我调用函数时，我确实会检索所有数据。像这样：

abort: ƒ (e)
always: ƒ ()
catch: ƒ (e)
done: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ (e)
overrideMimeType: ƒ (e)
pipe: ƒ ()
progress: ƒ ()
promise: ƒ (e)
readyState: 4
responseJSON: {email: Array(1), password1: Array(1), password2: Array(1)}
responseText: "{"email":["This field is required."],"password1":["This field is required."],"password2":["This field is required."]}"
setRequestHeader: ƒ (e,t)
state: ƒ ()
status: 400
statusCode: ƒ (e)
statusText: "Bad Request"
then: ƒ (t,r,i)
__proto__: Object

但是，当我这样做时：

let resp = send_data(register_url, data);
console.log(resp.responseJSON);

在我的JavaScript控制台中，我得到undefined。这是为什么？为什么我不能在responseJSON中检索数据？

Answer 1

要显示数据，请仅使用ajax，成功或错误中指定的回调，而不能使用其他方法。当然，您可以使用Promises或async task es 7功能，但是我看到您依赖于jquery lib。

function send_data(url, data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function (data) {
           console.log('received data', data);
        },
        error: function (xhr) {
         console.log('Error occured, proceed with some logic')
        }
    });
}

您得到的错误印象是，您得到某种结果，而由于返回了ajax对象，因此得到了结果。由于它是一个复杂的对象，因此您将获得它的所有功能和属性。

send_data(url, data) {
    return $.ajax({})
}

Answer 2

$.ajax是异步的还是不等待完成继续下一个操作，这就是为什么您为undefined获得console.log(resp.responseJSON);的原因

您需要回调函数

function send_data(url, data, callback) {
  return $.ajax({
    url: url,
    type: 'POST',
    data: data,
    success: callback,
    error: callback
  });
}

function ajaxCallback(data, status, jqXHR) {
  //if (status == "success") {}
  //else {}
  resp = jqXHR;
  console.log(resp.responseJSON);
}

let resp;
send_data(register_url, data, ajaxCallback);

400错误请求后如何返回JSON数据

2 个答案: