javascript 如何在做加载动画的同时又做系统的数据库进程

kb5ga3dv  于 2023-03-21  发布在  Java
关注(0)|答案(2)|浏览(64)

我知道解决这个问题的方法是 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
7gs2gvoe

7gs2gvoe1#

当你第一次创建请求时,打开加载器并隐藏内容,当请求完成时关闭加载器。你可能也不想等待点击再次显示主要内容-你可以在准备好后立即显示它。

const content = document.querySelector(".content");
const loading = document.querySelector(".loading");

function loadDoc() {
  content.style.visibility = "hidden";
  loading.style.visibility = "visible";
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      loading.style.visibility = "hidden";
      content.style.visibility = "visible";
    }
  };
  xhttp.open("POST", "_ORA_DB.php", true);
  xhttp.send();
}

风格方面,选择使用vanilla DOM方法还是jQuery方法也是很好的-在一个脚本中同时使用这两种方法是很奇怪的。最好选择一个或另一个。没有任何jQuery,它看起来像上面的代码:
或者你可以使用fetch代替XMLHttpRequest。
或者,使用jQuery,您可以使用jQuery.post,并将document.querySelector(".content")替换为$('.content'),将.style.visibility = "hidden";替换为.css('visibility','hidden');(对于'visible'也是如此)。

oknrviil

oknrviil2#

这就是答案:

$(document).ready(function() {   $(".content").click(function() {
    $(".content").hide();
    $(".loader").show();
    loadDoc(function() {
      $(".loader").hide();
      $(".content").show();
    });   }); });

function loadDoc(callback) {   $.ajax({
    url: "../db.php",
    type: "POST",
    success: function(response) {
      $("#dbprocess").html(response);
      callback();
    },
    error: function(xhr, status, error) {
      console.log("Error: " + error);
      callback();
    }   }); }

相关问题