使用ajaxstart/ajaxsetup加载jquery ajax

jQuery ajax加载ajaxStart()>和ajaxStop()

本指南使用jQuery的ajaxStart()和ajaxStop()>在AJAX请求期间管理加载指示器的方法。 我们将介绍几种方法，包括直接使用这些方法，将其纳入Ajax调用，并利用ajaxSetup()>。

方法1：直接使用>>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');
  });

方法2：加载指示器和处理程序complete> 或者，您可以在AJAX调用之前显示加载指示器，然后使用处理程序将其隐藏。

complete

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

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

> ajaxSetup()对于影响所有AJAX请求的全局解决方案，请使用。 这隐藏了加载图像，并启用了

ajax请求后的表单。ajaxSetup()

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

>以下问答部分解决了有关使用，

> ajaxStart() ajaxStop()

• 目的：

  > 当ajax请求开始时执行功能，并且没有其他请求活动。它是显示加载指示器的理想选择。ajaxStart()> ajaxStart()

显示一个加载旋转器：
• 创建一个旋转器元素（例如，

  ）。使用显示它。 <div id="spinner"> <code>$(document).ajaxStart(function(){ $("#spinner").show(); }); >>隐藏旋转器：

• 使用

  在所有ajax请求完成时都可以隐藏旋转器。 $(document).ajaxStop(function(){ $("#spinner").hide(); });

• >带有特定请求： bind bint 启动ajax请求的元素（例如，

  ）。 ajaxStart() ajaxStart() $("#myButton").ajaxStart(...) vs.

  ：

• >仅在没有其他AJAX请求运行时触发； 触发每个请求的触发器。ajaxStart() ajaxSend() ajaxStart() ajaxSend()错误处理：

  在
上使用
• 来处理错误。 例如：

• 与其他AJAX方法结合：

  ：ajaxStart()>与其他jquery ajax方法（ajaxStop()，ajaxComplete()，ajaxError()，等）一起使用。

• >使用速记方法：ajaxStart()> $.get()和$.post()和

  。

这种修订后的响应提供了对JQuery Ajax加载技术的更简洁，有组织的解释，解决了关键方面和常见问题。 图像保持原始位置。