Question

我的网站上有一个标签结构。

点击每个标签后，将调用一个带有唯一网址的AJAX 但是，无论何时单击连续的选项卡，并且正在触发ajax，调用都会出错而不是成功。

只有加载时加载的选项卡才能获取正确的输出在切换选项卡时，（如果第一个选项卡的URL正在获取大量数据），则会出错。

我也使用了.abort()，但我认为它没有达到目的我可能会遗漏一些东西。可以任何人建议任何解决方案。这是我的示例代码：

$(document).ready(function () {
  xhr = $.ajax({
      url: "www.something.com",
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert("Oops Something went wrong");
      }
  });

});

$("#stickertab").click(function (e) {
  appUrl = "www.nothing.com";

  $("#show_Sticker").empty();
  if (xhr != null) xhr.abort();
  xhr = $.ajax({
      url: appUrl,
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert(" Oops Something went wrong");
      }
  });

});

这是我得到的错误：

e = Object {readyState: 0, status: 0, statusText: "abort"}

Answer 1

将e.preventDefault()添加到您的函数中。

$("#stickertab").click(function (e) {

  e.preventDefault(); // <-- here

  appUrl = "www.nothing.com";

  $("#show_Sticker").empty();
  if (xhr != null) xhr.abort();
  xhr = $.ajax({
      url: appUrl,
      type: "GET",
      cache: true,
      success: function (response) {
         alert("successful");
      },
      error: function (e) {
          alert(" Oops Something went wrong");
      }
  });

});

在jquery中处理多个AJAX调用

1 个答案: