使用ajaxStart / ajaxSetup加载jQuery Ajax

关于如何使用jQuery.ajaxStart和jQuery.ajaxStop函数的 jQuery快速代码片段示例。 下面的例子。

使用ajaxStart和ajaxStop方法

在下面的示例中，我们使用它来显示正在加载的图像，并在处理ajax请求时单击了表单提交按钮。 然后，当它返回时，图像被隐藏，并且提交按钮再次可用。

var $form = $('#form');

$form.find('.loading')
  .hide()
  .ajaxStart(function()
  {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function()
  {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });

在Ajax之前使用插入的代码

另一种方法可能是在ajax调用之前添加图像。

//show loading image, disable submit button
$form.find('.msg').remove();
$form.find('.loading').show();
$form.find('.submit').attr('disabled', 'disabled');

然后向ajax函数添加一个完整的处理程序。

//hide loading image, enable submit button again
complete: function()
{
    $form.find('.loading').hide();
    $form.find('.submit').removeAttr('disabled');
}

使用ajaxSetup（）

另一种方法是使用jQuery.ajaxSetup，以便当所有ajax请求都“完成”返回时，隐藏图像并启用表单。

$.ajaxSetup( {
   complete:function() {
      $form.find('.loading').hide();
      $form.find('.submit').removeAttr('disabled');
   }
});

From: https://www.sitepoint.com/jquery-ajax-loading-ajaxstartajaxsetup/