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

您可以将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);

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

}

javascript- show ajax call＆amp; amp;成功后隐藏

3 个答案: