ajax回调函数javascript中的无序执行
我有一个以下ajax操作,旨在ajax回调函数javascript中的无序执行,javascript,jquery,ajax,asynccallback,Javascript,Jquery,Ajax,Asynccallback,我有一个以下ajax操作,旨在(1)在发送ajax请求之前显示微调器gif,在请求完成之后,(2)隐藏gif并3显示相应的警报消息。 最后,重新加载页面 代码如下: $.ajax({ url: rUrl, data: { id: rID, requisitionStatus: rStatus, comment: rComment }, type: "POST", cache: false, beforeSend: funct
(1)在发送ajax
请求之前显示微调器gif
,在请求完成之后,(2)隐藏gif并3显示相应的警报消息。
最后,重新加载页面
代码如下:
$.ajax({
url: rUrl,
data: {
id: rID,
requisitionStatus: rStatus,
comment: rComment
},
type: "POST",
cache: false,
beforeSend: function() {
$("#requisitionStatusDialog").dialog('close');
$('#ajax_loader_my').show();
},
success: function(data, resp) {
var json = data;
var obj = JSON && JSON.parse(json) || $.parseJSON(json);
if (obj.status == "success") {
alert('Success! ' + obj.message);
location.reload();
} else if (obj.status == "error") {
alert('Error!' + obj.message);
}
},
error: function(data, resp) {
$("#updateDialog").dialog('close');
console.log(resp);
},
complete: function() {
$('#ajax_loader_my').hide();
}
});
但在这种情况下,警报
首先弹出,而微调器gif
仍然显示,并且在单击确定
后重新加载
页面
我甚至尝试将gif隐藏在success
回调中,而不是使用complete
:
success: function(data, resp) {
var json = data;
var obj = JSON && JSON.parse(json) || $.parseJSON(json);
if (obj.status == "success") {
$('#ajax_loader_my').hide();
alert('Success! ' + obj.message);
location.reload();
} else if (obj.status == "error") {
alert('Error!' + obj.message);
}
},
两者都给出了相同的结果。我建议使用带有Id的空div或span。
而不是在该div的html中显示success。
例如:
$('#ajax_loader_my').hide();
setTimeout(function () {
$('#successDiv').html('Success! ' + obj.message);
location.reload();
}, 2000);
隐藏微调器之前弹出警报的原因是成功代码在完成之前运行,从而隐藏微调器。它重新加载的原因是,在发出警报后,您发送了location.reload()
检查$('#ajax_loader_my').hide();实际上是隐藏了旋转器。html中作为或包含微调器的元素必须将其id设置为ajax\u loader\u my
如果您打开Chrome或Firefox开发工具,您应该能够发送$('#ajax_loader_my').hide(),并查看发生了什么。以这种方式重写代码,这会将您的警报和位置相关代码放入事件队列中,事件队列将在空闲时运行
if(obj.status=="success") {
$('#ajax_loader_my').hide();
setTimeout(function(){
alert('Success! '+obj.message);
location.reload();
},0);
}
您好,您应该尝试使用承诺这里是文档,我在飞行中做了这个,它可能有一些错误,但只是一个例子:
$( function() {
function AjaxCall(rID,rStatus,rComment){
return $.ajax({
url: 'request.php',
data: {
id: rID,
requisitionStatus: rStatus,
comment: rComment
},
type: "POST",
cache: false,
beforeSend: function() {
$("#requisitionStatusDialog").dialog('close');
$('#ajax_loader_my').show();
}
})
}
$( "#requisitionStatusDialog" ).dialog();
$("#yourbuttonInputId").on('click',function(event) {
AjaxCall().done(function(data,response){
var obj = JSON.parse(data);
if (obj.status == "success") {
alert('whe are on done!');
}
}).fail(function(data,response){
$("#updateDialog").dialog(' close');
}).always(function(data){
if(confirm('You have finished the request. Click OK if you wish to continue ,click Cancel to reload the page.'))
{
$('#ajax_loader_my').hide();
$("#requisitionStatusDialog").dialog('open');
}else{
location.reload();
}
});
});
} );
编辑:选中此复选框,它将指导您详细说明代码
希望它有助于write$('ajax'u loader'u my').hide();在成功功能开始时,然后try@RK_15相同..发生这种情况的原因是$(…).hide()是异步的。请使用$('#ajax_loader_my')[0].style.display=“none”,然后try@Azima,请尝试我更新的答案。尝试使用一些内联html来显示成功或错误,或者登录到控制台,而不是警报。