Question

我有一个PHP页面。每次提交表格和获得回复的等待时间都不同。这取决于我提交的数字数据。

如何在此表单提交时显示加载程序并在完成后停止？

P.S。：我找到了一些不错的CSS加载器：https://projects.lukehaas.me/css-loaders。

Answer 1

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

Answer 2

如果你使用的是ajax，那么你可以点击一个按钮开始显示GIF，然后在完成ajax调用的事件中你可以删除loding GIF

最初使用此

点击提交使用

$("#btnSubmit").click(function(){
     $("#showGif").attr("style","");

})

并且使用

成功执行ajax调用

$("#showGif").attr("style","display:none");

但是如果你使用完整的帖子，那么你的Gif将不会显示出来的请求和回应。

如果仍然需要它，您需要在提交按钮的点击事件中显示，如上所示。但最初你需要将display属性保持为不包含GIF div

如何在表单加载时显示加载程序？

2 个答案: