javascript-在ajax调用中显示加载程序&；得逞

我有点困惑

我正在用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（）

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

您可以这样做：

在请求进行过程中：

加载完成后：

您可以将其与事件一起使用：

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);

var ajax=new-XMLHttpRequest（）；
addEventListener（“加载”），函数（事件）{
上传完成（事件，卷）；
hideLoader（）；//对于纯JS，您可以这样做：

function loadData() {
    var ajax = new XMLHttpRequest();

    ajax.onreadystatechange = function() {
        if (ajax.readyState === 4 ) {
           if (ajax.status === 200) {
               hideLoader();
               //your code after ajax response, use ajax.responseText
           }
           else {
               console.log('Some error...');
           }
        }
    };

    ajax.open("POST", url);
    ajax.send(formdata);
    showLoader();

}

因此，我应该包括ajax.addEventListener（“load”，function（event）{uploadcomplete（event，furl）；}，false）；在这两者之间，对吗？@Faouzi-oudouhin在
ajax.open（）之前包含它
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);

function loadData() {
    var ajax = new XMLHttpRequest();

    ajax.onreadystatechange = function() {
        if (ajax.readyState === 4 ) {
           if (ajax.status === 200) {
               hideLoader();
               //your code after ajax response, use ajax.responseText
           }
           else {
               console.log('Some error...');
           }
        }
    };

    ajax.open("POST", url);
    ajax.send(formdata);
    showLoader();

}