XMLHttpRequest 有時不起作用

Question

我創建了一個ClickListener ，它應該向我的服務器發出POST請求。 大多數情況下，發出 POST 請求，但有時，無論我嘗試多少次，它都無法發出POST請求。 任何人都可以幫助我了解問題是什么以及如何解決它？ 這是我正在處理的代碼：

$("#Button11").on("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/addtolist", true);
  xhr.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded",
    "Access-Control-Allow-Origin",
    "*"
  );
  var parameter = "dc=deal1";
  xhr.send(parameter);
  window.location.href = "/final_page.ejs";
});

Answer 1

問題

XMLHttpRequest.send()是一種異步方法，這意味着該方法只要求發送請求，但不會立即完成。 大多數情況下，這並不重要，但在您的腳本中，您會在它之后立即重定向用戶，因此，有時，用戶會在發送請求之前被重定向。

解決方案

在重定向用戶之前，您必須等待請求完成，謝天謝地， XMLHttpRequest有一種方法可以實現它。 它是XMLHttpRequest.onload()方法。 因此，您可以將腳本更新為：

$("#Button11").on("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/addtolist", true);
  xhr.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded",
    "Access-Control-Allow-Origin",
    "*"
  );
  var parameter = "dc=deal1";
  xhr.send(parameter);
  xhr.onload = function(){
    window.location.href = "/final_page.ejs";
  };
});

正如評論中提到的，JQuery 也有一個用於發出請求的集成解決方案，我建議您閱讀它的文檔以獲得更好的解決方案。

Answer 2

您的位置更改在完成之前殺死了您的 Ajax

另外為什么不使用更簡單的 $.post 現在你有了它？

不需要您的任何標頭，甚至不允許您設置 auth 標頭

$("#Button11").on("click", function() {
  $.post("/addtolist",{"dc":"deal1"},function() {
    window.location.href = "/final_page.ejs";
  })  
});