我正在尝试显示加载动画并在发送ajax请求之前隐藏搜索输入框,“。se-pre-con”元素是加载程序。
如下所示,我想在ajax请求的beforeSend中显示这一点。但是,当用户在搜索框中输入然后停止指定的延迟(1000毫秒)时,输入框仍然会在整个ajax请求中显示,但它没有响应。
然后返回结果,并且加载动画执行fadeOut,因此show()必须触发,但页面保持不变,直到返回结果。我想阻止无响应的页面效果并在请求期间显示加载动画。任何帮助深表感谢。
$(document).ready(function() {
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$('#search_field').keyup(function() {
var target = $(this);
delay(function() {
getSearchResults(target.val());
}, 1000);
});
function getSearchResults(str) {
$.ajax({
beforeSend: function(){
$(".se-pre-con").show();
$("#search_field").hide();
},
url: "http://example.com/Search_Results.php",
dataType:"html",
data: {"search_term": str},
method: "post",
async: false,
success: function(data){
if(data !== null) {
$("#search_default").hide();
$("#search_results_wrapper").html(data);
}
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
},
error: function(){
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
}
});
}
});
答案 0 :(得分:0)
我找到了解决方案。
<强>解决方案强>
删除选项后,它开始工作了:
async: false