jQuery ajaxStart()方法

jQuery ajaxStart() 方法用于在发送第一个ajax请求时，显示一个动画加载图标或文本提醒，通常配合ajaxStop() 方法使用，可以在所有请求完成后，隐藏加载提示。

该方法定义如下：

$(document).ajaxStart(function(){
  // 显示加载提示
});

其中，$(document) 表示在整个页面上实现效果，可以根据实际情况自定义选择器。

接下来，我们通过两个示例来详细讲解ajaxStart() 的使用方法。

示例1：基本使用方法

在网页上通过点击按钮发起一个 ajax 请求，并在请求发送时显示加载提示。代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ajaxStart示例1</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button>点击发送请求</button>
  <div class="loading">正在加载...</div>

  <script>
    // 页面上显示加载提示
    $(document).ajaxStart(function(){
        $(".loading").show();
    });

    // 页面上隐藏加载提示
    $(document).ajaxStop(function(){
        $(".loading").hide();
    });

    // 在点击按钮时发送ajax请求
    $("button").click(function(){
        $.ajax({
            url: "https://api.github.com/users/octocat",
            success: function(result){
                console.log(result);
            }
        });
    });
  </script>
</body>
</html>

如上所示，当点击按钮时发送 ajax 请求，同时页面上显示一个正在加载...的文本。当请求完成后控制台输出结果，并在整个请求周期结束后，隐藏加载提示。

示例2：结合Bootstrap动画效果使用

在网页上通过点击按钮发起一个 ajax 请求，并在请求发送时显示Bootstrap中的加载动画图标。代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ajaxStart示例2</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button>点击发送请求</button>
  <div class="loading spinner-border text-primary" role="status" style="display:none">
    <span class="visually-hidden">Loading...</span>
  </div>

  <script>
    // 页面上显示Bootstrap动画加载提示
    $(document).ajaxStart(function(){
        $(".loading").show();
    });

    // 页面上隐藏Bootstrap动画加载提示
    $(document).ajaxStop(function(){
        $(".loading").hide();
    });

    // 在点击按钮时发送ajax请求
    $("button").click(function(){
        $.ajax({
            url: "https://api.github.com/users/octocat",
            success: function(result){
                console.log(result);
            }
        });
    });
  </script>
</body>
</html>

如上所示，当点击按钮时发送 ajax 请求，同时页面上显示Bootstrap中的 spinner-border 类型的加载动画图标。当请求完成后控制台输出结果，并在整个请求周期结束后，隐藏加载提示。

综上所述，ajaxStart() 方法可以在ajax请求发送前，在页面上实现动画加载图标或文本提醒，提高用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery ajaxStart()方法 - Python技术站

示例1：基本使用方法

示例2：结合Bootstrap动画效果使用

相关文章