Ajax请求有时会导致XHR加载失败：POST错误

Question

我试图运行一个简单的Ajax请求，以将JSON对象从我的Javascript文件传递到我在Django中的Python文件。 但是有一半的时间，我得到如下错误： XHR failed loading: POST ，如下所示：

var csrf = $("[name=csrfmiddlewaretoken]").val()
$.ajax({
    type: "POST",
    url: "/fridge",
    data: {
        "fridgeitems": JSON.stringify(fridge),
        "csrfmiddlewaretoken": csrf
    },
    dataType: "json",
    timeout: 5000,
    }).done(function(data) {
        console.log(data.fridge);
    }).fail(function(jqXHR, status) {
        alert('Request could not complete' + status);
    });
})

// rest of code

在我的python文件中：

fridgeitems = request.POST['fridgeitems']

# do something with the data

response_data = json.dumps(fridgeitems)
return JsonResponse({"fridge": fridgeitems}})

我认为正在发生的事情是，当放置Ajax请求时，其余代码将在ajax调用有时间加载之前运行，完成并退出该函数。 我试图在我的Ajax调用中包含timeout ，但是这似乎无济于事。 如何使函数等待Ajax调用完成？

Answer 1

您的问题很可能是您的请求在一段时间未收到服务器响应后就超时了。 一种可能的原因是由于网络速度较慢。

要解决此问题，请执行以下两项操作中的一项或两项：

1 。 使用jqXHR对象的fail()方法处理请求未完成的情况。

2 。 在ajax请求设置中包括timeout 。

我在下面说明如何使用组合策略：

var csrf = $("[name=csrfmiddlewaretoken]").val();
$.ajax({
    method: "POST",
    url: "/fridge",
    data: {
        "fridgeitems": JSON.stringify(fridge),
        "csrfmiddlewaretoken": csrf,
    },
    dataType: "json",
    timeout: 5000 // 5000ms
}).done(function(data) {
    // is called if request is successful
    console.log(data.fridge);
}).fail(function(jqXHR, status) {
    // is called if request fails or timeout is reached
    alert('Request could not complete: ' + status);
});

注意，使用jQuery延迟对象方法： done()和fail()而不是sucess()和error() 。 不推荐使用后者。