一旦完成所有Ajax请求都完成code [英] perform code once all ajax requests are completed
问题描述
我有一个相当复杂的搜索，它利用多个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.
这篇关于一旦完成所有Ajax请求都完成code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
