在jQuery中处理多个AJAX调用

Question

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

在每个选项卡上单击时，将调用带有唯一URL的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");
      }
  });

});