博客

jQuery ajaxStart()方法

  • Post category:jquery

jQuery ajaxStart()方法用于在AJAX请求开始时执行的回调函数。这个函数会在每个AJAX请求开始时执行一次，无论是否已经有其他AJAX请求在进行中，因此适用于在页面上显示”加载中”效果的场景。下面我们来详细讲解它的用法。

语法

$(document).ajaxStart(function)

参数

function：必需。规定当请求开始时执行的函数。在这个函数中，我们可以编写需要在每个AJAX请求开始前执行的操作。

示例1

我们使用下面的代码对AJAX全局设置开启”加载中”效果：

$(document).ajaxStart(function() {
  $('#loading').show();
});

在这段代码中，我们利用jQuery选择器获取页面上表示”加载中”的元素（如一个旋转的loading图标），然后通过.show()方法显示它。这样，在每个AJAX请求开始时都会调用ajaxStart方法中的回调函数，并展示”加载中”效果。

示例2

下面的代码演示了如何禁用提交按钮，在提交时显示”加载中”效果：

$('form').submit(function(e) {
  // 防止表单默认提交行为
  e.preventDefault();

  // 禁用提交按钮
  $('input[type="submit"]').prop('disabled', true);

  // 显示"加载中"效果
  $('#loading').show();

  // 发送AJAX请求
  $.ajax({
    url: 'example.com/submit',
    type: 'POST',
    data: $(this).serialize(),
    success: function(response) {
      // 处理成功响应
    },
    error: function(xhr, status, error) {
      // 处理异常响应
    },
    complete: function() {
      // 隐藏"加载中"效果
      $('#loading').hide();

      // 启用提交按钮
      $('input[type="submit"]').prop('disabled', false);
    }
  });
});

在这段代码中，我们使用jQuery为一个表单元素设置提交事件，这样当表单提交时就会触发回调函数。 在回调函数中，我们首先防止表单的默认提交行为，然后禁用按钮，显示”加载中”效果，随后发起AJAX请求。在请求结束后，我们隐藏”加载中”效果，启用按钮。

这两个例子演示了如何使用ajaxStart方法处理一个AJAX请求和一个表单提交。使用ajaxStart方法可以简化代码，避免在多个AJAX请求中编写重复的加载效果展示代码。

Tags: