一旦完成所有Ajax请求都完成code

本文介绍了一旦完成所有Ajax请求都完成code的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个相当复杂的搜索，它利用多个Ajax调用的流程如下：

用户执行搜索按钮点击 AJAX请求发送到PHP页面返回的JSON数据     每个结果在返回的数据更多的AJAX请求时         运行功能，这使得更多的Ajax调用     最终每个 最后点选功能

这一切都工作得很好，我想这样做是在一个div显示加载信息，并打开搜索按钮，然后当所有Ajax请求已完成重新启用按钮，删除加载信息。

我的脚本如下，此刻的按钮禁用/ renable正在发生的事情几乎在瞬间，我presume因为Ajax调用asyncronus，我怎么去renabling按钮和删除加载消息一旦所有Ajax请求已完成，显示的数据??

$（'＃advKeyBtn）。住（点击，函数（）{         $（'＃advKeyBtn）ATTR（禁用，禁用）。         $（'＃searchStatus）HTML（'＆LT; IMG SRC =../ IMG /图标/ loadinfo.gifWIDTH =16高度=16/＆GT;搜索位置...）。         $（'＃结果）HTML（''）。 //清除现有内容         $（'＃borough_links）HTML（''）。 //清除现有内容         //处理程序提前搜索按钮         VAR myUrl ='getKeyBoroughs.php';         VAR myKeys = $（'＃关键字）VAL（）。         VAR =的myType $（'输入[名称= keyParams]：选中）VAL（）。         $阿贾克斯（{             网址：myUrl，             数据：键=+ myKeys +'和;类型='+的myType，             键入：POST，             传统：假的，             数据类型：JSON，             错误：函数（XHR，状态文本，errorThrown）{                 //制定出什么错误了，并显示相应的消息             }，             成功：函数（myData的）{                 //数据retrived确定                 $每个（myData.boroughs，功能（intIndex，objValue）{                     //alert(myData.boroughs[intIndex].Borough_ID）;                     makeCSS（myData.boroughs [intIndex] .Borough_ID）;     getKeyLocations（myData.boroughs [intIndex] .Borough_ID）                     }）                     //$('#'+divId).append(myData)//construct位置持有                 }             }）;             $（'＃advKeyBtn）ATTR（'残疾'，''）。             $（'＃searchStatus）HTML（搜索完成后，点击一个地区查看位置）。         }）;

和那个被从主Ajax调用的初步成功调用的函数

函数getKeyLocations（ID）{                     VAR myUrl ='getKeyLocations.php';                     VAR myBorough = ID;                     VAR myKeys = $（'＃关键字）VAL（）。                     VAR =的myType $（'输入[名称= keyParams]：选中）VAL（）。                     VAR DIVID ='#borough _'+ ID;                     $阿贾克斯（{                         网址：myUrl，                         键入：POST，                         数据：'borough_id ='+ myBorough +'和;键='+ myKeys，                         错误：函数（XHR，状态文本，errorThrown）{                             //制定出什么错误了，并显示相应的消息                         }，                         成功：函数（myData的）{                             $（DIVID）的.html（myData的）;                         }                     }）;                 };

解决方案

您必须创建一个函数，将处理所有的请求。当所有的请求都完成然后启用按钮和显示信息。

VAR ajaxLoading = {         _requestsInProcess：0，         显示：函数（）{             如果（this._requestsInProcess == 0）{                 $（'＃advKeyBtn）ATTR（禁用，禁用）。                 $（'＃searchStatus）HTML（'＆LT; IMG SRC =../ IMG /图标/ loadinfo.gifWIDTH =16高度=16/＆GT;搜索位置...）。             }             this._requestsInProcess ++;         }，         隐藏：函数（）{             this._requestsInProcess--;             如果（this._requestsInProcess == 0）{                 $（'＃advKeyBtn）ATTR（'残疾'，''）。                 $（'＃searchStatus）HTML（搜索完成后，点击一个地区查看位置）。             }         }     };

现在，所有的Ajax调用，使用前：

ajaxLoading.show（）

和你所有的成功的方法是：

ajaxLoading.hide（）

希望这有助于。

I've got quite a complex search which utilises multiple ajax calls, the flow is as follows:

user performs search on button click ajax request is made to php page which returns json data for each result in returned data additional ajax request is made run function which makes additional ajax call end for each end click function

this all works nicely, what i would like to do is display a loading message in a div and disable the search button, then when all the ajax requests have completed re-enable the button and remove the loading message.

my script is below, at the moment the disable/renable of the button is happening almost instantaneously, i presume because the ajax calls are asyncronus, how do i go about renabling the button and removing the loading message once all the ajax requests have completed and displayed the data??

$('#advKeyBtn').live('click', function() { $('#advKeyBtn').attr('disabled', 'disabled'); $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...'); $('#results').html(''); //clear existing contents $('#borough_links').html(''); //clear existing contents // handler for advance search button var myUrl = 'getKeyBoroughs.php'; var myKeys = $('#keywords').val(); var myType = $('input[name=keyParams]:checked').val() $.ajax({ url: myUrl, data: "keys=" + myKeys +'&type='+myType, type: "POST", traditional: false, dataType: 'json', error: function(xhr, statusText, errorThrown){ // Work out what the error was and display the appropriate message }, success: function(myData){ // data retrived ok $.each(myData.boroughs, function( intIndex, objValue ){ //alert(myData.boroughs[intIndex].Borough_ID); makeCSS(myData.boroughs[intIndex].Borough_ID); getKeyLocations(myData.boroughs[intIndex].Borough_ID) }) //$('#'+divId).append(myData)//construct location holders } }); $('#advKeyBtn').attr('disabled', ''); $('#searchStatus').html('Search Complete, click on an area to view locations'); });

and the function that gets called from the initial success of the main ajax call

function getKeyLocations(id){ var myUrl = 'getKeyLocations.php'; var myBorough = id; var myKeys = $('#keywords').val(); var myType = $('input[name=keyParams]:checked').val() var divId = '#borough_'+ id; $.ajax({ url: myUrl, type: 'POST', data: 'borough_id='+myBorough+'&keys='+myKeys, error: function(xhr, statusText, errorThrown){ // Work out what the error was and display the appropriate message }, success: function(myData){ $(divId).html(myData); } }); };

解决方案

You have to create a function that will handle all your requests. When all requests are finished then enable the button and show the message.

var ajaxLoading = { _requestsInProcess: 0, show: function () { if (this._requestsInProcess == 0) { $('#advKeyBtn').attr('disabled', 'disabled'); $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...'); } this._requestsInProcess++; }, hide: function () { this._requestsInProcess--; if (this._requestsInProcess == 0) { $('#advKeyBtn').attr('disabled', ''); $('#searchStatus').html('Search Complete, click on an area to view locations'); } } };

now, before all ajax call use:

ajaxLoading.show()

And in all your success methods use:

ajaxLoading.hide()

Hope this helps.