在返回之前取消jQuery AJAX调用?

我有一个打开的jQuery对话框,然后进行AJAX调用。 我想这样做,如果关闭对话框或按下取消按钮,AJAX调用将被取消,并且不会调用其回调函数。 我可以想办法用这样的变量做到这一点:

function doStuff(){ var doCallback = true; $('#dialog').dialog({ title: 'Dialog Title', modal: true, buttons: { Cancel: function() { doCallback = false; doSomethingElse(); } } }); $.get('url/url/url', function(data){ if(doCallback){ doTheSuccessThing(data); } }); } 

但是,不知怎的,这对我来说感觉很脏,并且实际上并没有阻止AJAX调用完成。 是否有内置方法取消正在进行的AJAX调用?

当我有一个可能被多次触发的回调,但我想只使用最后一个,我使用这个模式:

 var resultsXHR, resultsTimer, resultsId=0; $('input').keyup(function(){ clearTimeout(resultsTimer); // Remove any queued request if (resultsXHR) resultsXHR.abort(); // Cancel request in progress resultsTimer = setTimeout(function(){ // Record the queued request var id = ++resultsId; // Record the calling order resultsXHR = $.get('/results',function(data){ // Capture request in progress resultsXHR = null; // This request is done if (id!=resultsId) return; // A later request is pending // ... actually do stuff here ... }); },500); // Wait 500ms after keyup }); 

仅使用abort()不足以阻止调用成功回调; 即使您尝试取消请求,您仍可能会发现回调运行。 这就是为什么有必要使用resultsId跟踪器并让你的回调停止处理,如果另一个,稍后,重叠的回调准备就绪。

鉴于这是多么常见和繁琐,我认为以一种可重复使用的方式将其包装起来是一个好主意,这种方式不需要你为每个想要处理的每个变量名称提供一个独特的三元组:

 (function($){ $.fn.bindDelayedGet = function(event,delay,url,dataCallback,dataType,callback){ var xhr, timer, ct=0; return this.bind(event,function(){ clearTimeout(timer); if (xhr) xhr.abort(); timer = setTimeout(function(){ var id = ++ct; xhr = $.get(url,dataCallback && dataCallback(),function(data){ xhr = null; if (id==ct) callback(data); },dataType); },delay); }); }; })(jQuery); // In action var inp = $('#myinput').bindDelayedGet('keyup',400,'/search', function(){ return {term:inp.val()}; }, 'html', function(html){ $('#searchResults').clear().append(html); } ); 

您可以在我的网站上找到更详细讨论的上述代码。

好的,所以根据建议使用$ .get函数返回的XmlHttpRequest对象,我提出了这个:

 function doStuff(){ var ajaxRequest = $.ajax({ url : 'url/url/url', type : "GET", success : function(data){ ajaxRequest = null; doSuccessStuff(data); } }); $('#dialog').dialog({ title: 'Stuff Dialog', bgiframe: true, modal: true, buttons: { Cancel: function() { if (ajaxRequest) ajaxRequest.abort(); doCancelStuff(); } } }); } 

对我来说似乎工作和感觉更干净。

在jQuery中没有方法,但你可以只使用从jQuery get / post / ajax函数返回的XmlHttpRequest对象。

来自jQuery博客 :

 // Perform a simple Ajax request var req = $.ajax({ type: "GET", url: "/user/list/", success: function(data) { // Do something with the data... // Then remove the request. req = null; } }); // Wait for 5 seconds setTimeout(function(){ // If the request is still running, abort it. if ( req ) req.abort(); }, 5000); 

它似乎是这样,虽然我从来没有这样做过。

$.get返回一个XmlHttpRequest对象,它有一个可以调用的abort()方法。 也许尝试一下?

如果你在脚本中添加一个条件你就是ajax到条件为真的你输出你的html,否则,你不输出任何东西,然后你可以做简单的if(html)检查成功函数如下:

 $.ajax({ type: "GET", url: "url.php", data: "data="+data, success: function(html) { if(html){ $("#container").empty().html(html); } } }); 

在这个例子中,url.php看起来像这样:

 $data = $_GET['data']; if($data=="whatever"){ echo "
Hello
"; }else{}

这对我有用。 我知道这篇文章很老,但希望它可以帮到某个人。