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

您可以這樣做：

請求進行中：

ajax.addEventListener("progress", showLoader);

加載完成后：

ajax.addEventListener("load", hideLoader);

Answer 2

您可以將其與帶有onreadystatechange事件的readyState一起使用：

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

Answer 3

使用Plain 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();

}