jquery-ui - 提交表单时显示加载器

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();
}); 
});
});
}
});
});

...但是，我想要的是响应表单（在加载时）向我展示下一个 loader .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');
  });