我知道解决这个问题的方法是 AJAX 。我已经编码了,但是系统会先完成数据库任务,然后它会显示加载动画。我想当数据库任务发生时,它会显示加载动画。这是我的代码:
<script>
function loadDoc(){
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
$(".content").on("click",function(){
if (document.readyState !== 'complete') {
document.querySelector(".content").style.visibility = "hidden";
document.querySelector(".loading").style.visibility = "visible";
} else {
document.querySelector(".loading").style.visibility = "hidden";
document.querySelector(".content").style.visibility = "visible";
}
});
}
};
xhttp.open("POST","_ORA_DB.php",true);
xhttp.send();
}
</script
2条答案
按热度按时间7gs2gvoe1#
当你第一次创建请求时,打开加载器并隐藏内容,当请求完成时关闭加载器。你可能也不想等待点击再次显示主要内容-你可以在准备好后立即显示它。
风格方面,选择使用vanilla DOM方法还是jQuery方法也是很好的-在一个脚本中同时使用这两种方法是很奇怪的。最好选择一个或另一个。没有任何jQuery,它看起来像上面的代码:
或者你可以使用
fetch
代替XMLHttpRequest。或者,使用jQuery,您可以使用
jQuery.post
,并将document.querySelector(".content")
替换为$('.content')
,将.style.visibility = "hidden";
替换为.css('visibility','hidden');
(对于'visible'
也是如此)。oknrviil2#
这就是答案: