[英]javascript- show loader in ajax call & hide after success
I'm a little bit confused here. 我在这里有点困惑。
I am creating a form in javascript and posting the values to a php page ( submit.php
) and if the php page returns success, I will redirect the user to another page success.php
我正在用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';
}
Thing is, I wanna show a loader icon when the form data is getting process and hide it when it's complete. 问题是,我想在表单数据正在处理时显示一个加载器图标,并在完成时将其隐藏。 For that, I created two functions
showLoader()
and hideLoader()
为此,我创建了两个函数
showLoader()
和hideLoader()
My question is, where should I include these functions? 我的问题是,我应该在哪里包括这些功能?
You do it like so: 您可以这样做:
While the request is in progress : 请求进行中:
ajax.addEventListener("progress", showLoader);
When loading done : 加载完成后:
ajax.addEventListener("load", hideLoader);
You can use it with readyState with onreadystatechange
event: 您可以将其与带有
onreadystatechange
事件的readyState一起使用:
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(ajax.readyState === 0){
showLoader();
}else if(ajax.readyState === 4){
hideLoader();
}
};
Or within your code you can call them here: 或者在您的代码中,您可以在此处调用它们:
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);
With Plain JS, you can do it like this: 使用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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.