gpt4 book ai didi

javascript - 进行 AJAX 调用时加载程序不显示

转载 作者:行者123 更新时间:2023-12-02 23:59:20 33 4
gpt4 key购买 nike

我有一个 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/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com