我有一个 JavaScript 函数,它进行 AJAX 调用以返回一些数据,该调用是在选择列表更改事件上触发的。
我尝试了多种方法来在等待时显示加载程序,因为它当前暂停了选择列表,从客户的 Angular 来看,它看起来不太好。
问题是,无论我尝试以何种方式显示此内容,AJAX 调用都会在加载程序显示之前完成。
当前代码:
<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//there are more options but this isn't important here
</select>
JS 文件
function selectAddress(data) {
var loader = document.getElementbyId('overlay-loader');
var selectedAddress = data.value;
var uprn = selectedAddress.split(',')[1];
loader.style.display = "block";
$.ajax({
url: '~/collectiondates',
async: false,
data: {
uprn: uprn
},
success: function (data) {
result = data;
}
这是我尝试过的方法之一,我还尝试在“onchange”事件上调用一个单独的函数,在 selectAddress 中调用一个单独的函数,以及另一个显示加载程序然后调用“selectAddress”的函数,但没有任何效果, AJAX 功能总是先完成,然后显示加载程序(当不再需要时)。
代码的其余部分完全符合预期。
谢谢。
最佳答案
嗨,您应该使用延迟 promise ,包括完成、失败和始终与您的ajax调用,甚至设置超时(如果请求是那么快)检查我在这个jsfiddle中所做的示例,这里还有一个语法示例:
$( 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();
}
});
});
} );
希望有帮助 =)
关于javascript - 进行 AJAX 调用时加载程序不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55245282/