在jquery中处理多个AJAX调用

Question

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

点击每个标签页，AJAX将被调用，并带有唯一的URL。
但是，无论何时连续的选项卡被点击，并且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"); 
     } 
    }); 

});