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() 。 不推薦使用后者。