提交表单时显示加载程序

Question

我有以下代码负责在函数load（）中提交表单。

$(document).ready(function(){
$("#productfilter").validate({
submitHandler: function(form) {
$.post ('listproresult_core.php', $("#productfilter").serialize(), function(data)   {
$('#contentincore').html(data);
$('#contentincore a').click(function(e) {
$("#contentincore").on("click", "a:not(.minlink)" && "a:not(.prolink)", function ( e ) {
$("#contentincore").load($(this).attr("href"));
e.preventDefault();
}); 
});
});
}
});
});

...但是，我想要的是响应表单（在加载时）以显示下一个加载器.gif。

$("#contentincore").html("<img src='loader.gif'class='clock' border='0' />");

Answer 1

使用ajax发布表单，然后执行'beforeSend'

$.ajax({
    type: "POST",
    url: "listproresult_core.php",
    data: $("#productfilter").serialize(),

    beforeSend: function() {                                
        $("#contentincore").html("<img src='loader.gif'class='clock' border='0' />");                                       
    }, 

    success: function(result) {                     
        $("#contentincore").html("");        
    }                       
}); 

Answer 2

1. 创建一个包含img gif加载的div。

   查看html代码

的图片

2. 在js的ready函数中输入以下代码：

 $('#loadingDiv')
  .hide()  // hide it initially
  .ajaxStart(function() {
      $('#loadingDiv').show();
  })
  .ajaxStop(function() {
      $('#loadingDiv').hide();
  })
  .ajaxError(function() {
      alert('Ajax Error');
  });