javascript-在ajax调用中显示加载器并在成功后隐藏

Question

我在这里有点困惑。

我正在用 javascript 创建一个表单并将值发布到 php 页面 (submit.php)，如果 php 页面返回成功，我会将用户重定向到另一个页面 success .php

var url = 'submit.php';
var furl = 'success.php';
var formdata = new FormData();
formdata.append("name", 'John');
formdata.append('staffid',123);
formdata.append('csrf_test_name',csrf_token);

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event,furl);
}, false);
ajax.open("POST", url);
ajax.send(formdata);

function uploadcomplete(event,furl) {
    var response = event.target.responseText.trim();
    if(response=='Failed') {
        alert('Failed');
    } else {
        alert('Success');
        window.location.replace(furl);
    }
}

function showLoader(){
    document.getElementById('loader').style.display = 'block';
}

function hideLoader(){
    document.getElementById('loader').style.display = 'none';
}

事情是，我想在表单数据正在处理时显示一个加载器图标，并在完成时隐藏它。为此，我创建了两个函数 showLoader() 和 hideLoader()

我的问题是，我应该在哪里包含这些函数？

Answer 1

您可以将它与 readyState 一起使用与 onreadystatechange 事件:

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
  if(ajax.readyState === 0){ 
    showLoader(); 
  }else if(ajax.readyState === 4){
    hideLoader();
  }
};

或者在您的代码中，您可以在此处调用它们:

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event,furl);
    hideLoader(); //<------------------hide the loader here when done.
}, false);
ajax.open("POST", url);
showLoader(); // <------------------call and show loader here.
ajax.send(formdata);