如何在表单加载时显示加载器?
我有一个PHP
页面。提交表格和获得回复的等待时间每次都是不同的。这取决于我提交的号码数据。如何在表单加载时显示加载器?
我如何可以显示程序的时候,这种形式提交,并阻止它完成后?
P.S:我发现了一些不错的CSS装载机:https://projects.lukehaas.me/css-loaders。
(function($){
$(function(){
$('#form').submit(function(event){
event.preventDefault();
var loading_image = $('#form_loading_img'),
data = $(this).serialize(),
form = $(this);
loading_image.show();
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: data,
success:function(){
window.location.reload();
},
error:function(){
alert('Something goes wrong. Please check the form and try again.');
},
complete:function(){
loading_image.hide();
}
});
});
});
})(jQuery);
<img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif" id="form_loading_img" style="display:none">
<form action="action.php" id="form" method="post">
<!--- Your form element ---->
</form>
谢谢您的回答。 – nistelrooy41001662
其Ajax调用我想你需要非阿贾克斯 – Alex
这是不可能的显示形式上传仅PHP在一个图像或消息。在阿贾克斯最好的和简单的解决方案。JQuery的Ajax很简单,然后是JavaScript。如果我错了,请给我一个另一种方法,它会对我有帮助。 – Niladri
如果你正在使用AJAX,那么你可以开始展示GIF上按一下按钮,然后在阿贾克斯的做好的情况下调用,您可以删除装载仪GIF
最初使用这个
并在点击提交使用
$("#btnSubmit").click(function(){
$("#showGif").attr("style","");
})
,并在你的Ajax调用使用的成功功能
$("#showGif").attr("style","display:none");
但是,如果你正在使用完整的帖子,然后你的Gif不会是extire请求和响应显示。
如果仍然需要它,你需要表现出对如上图所示提交按钮的点击事件。 但最初你需要的是您使用的数据提交阿贾克斯(),以显示属性保持到没有包含GIF div
谢谢你的回答 – nistelrooy41001662
那怎么样? – Alex
uhh..don't使用'.attr( '风格' ...' - 只需使用'.hide()'和'.show()',而不是它的更短,更清晰,你不清理掉任何。内嵌样式,可能在那里。 – jbyrd
的? –
你在使用ajax吗? – Alex
不,我不使用ajax – nistelrooy41001662