javascript - 表单加载时如何显示加载器？

Question

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

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

PS:我找到了一个不错的 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>