jQuery ajaxStop()方法

下面就是jQuery ajaxStop()方法的完整攻略：

概述

jQuery ajaxStop()方法是一个事件方法，该方法会在所有ajax请求都完成后触发。这个事件通常用来回收所有与ajax请求相关的资源或者执行一些与ajax相关的清理工作。

语法

$(document).ajaxStop(function(){
    //在所有ajax请求完成之后执行的代码
});

参数说明

该方法不接受任何参数。

示例1：在所有ajax请求完成后隐藏loading图标

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例1</title>
    <script src="jquery.min.js"></script>
    <style>
        #loading {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -15px 0 0 -15px;
            background-image: url("loading.gif");
            display: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="loading"></div>
    <button id="btn">获取数据</button>
</body>
<script>
    $(document).ajaxStart(function(){
        $("#loading").show();
    });
    $(document).ajaxStop(function(){
        $("#loading").hide();
    });
    $("#btn").click(function(){
        $.get("data.json", function(result){
            $("body").append(result);
        });
    });
</script>
</html>

在本例中，我们使用ajaxStart()方法和ajaxStop()方法来实现在所有ajax请求完成后显示loading图标和隐藏loading图标的效果。具体来说，ajaxStart()方法会在所有ajax请求开始前触发，我们可以在该事件处理函数中实现显示loading图标的逻辑。而ajaxStop()方法会在所有ajax请求完成后触发，我们可以在该事件处理函数中实现隐藏loading图标的逻辑。

示例2：在所有ajax请求完成后记录请求的总数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例2</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div id="output"></div>
    <button id="btn">获取数据</button>
</body>
<script>
    var count = 0;
    $(document).ajaxStart(function(){
        count++;
    });
    $(document).ajaxStop(function(){
        $("#output").text("总共发起了" + count + "个ajax请求。");
    });
    $("#btn").click(function(){
        $.get("data.json", function(result){
            $("body").append(result);
        });
        $.get("moredata.json", function(result){
            $("body").append(result);
        });
        $.get("evenmoredata.json", function(result){
            $("body").append(result);
        });
    });
</script>
</html>

在本例中，我们使用ajaxStart()方法和ajaxStop()方法来统计在所有ajax请求完成后总共发起了多少个ajax请求的数量，并展示到页面中。具体来说，我们使用一个count变量记录ajax请求的总数，然后在ajaxStart()方法中每次请求开始时将count加1，在ajaxStop()方法中将count的值展示在页面中。

总结

以上就是jQuery ajaxStop()方法的详细攻略。该方法是一个事件方法，在所有ajax请求都完成后触发，通常用来回收所有与ajax请求相关的资源或者执行一些与ajax相关的清理工作。本文中的两个示例分别展示了如何使用ajaxStart()方法和ajaxStop()方法来实现在所有ajax请求完成后显示loading图标和隐藏loading图标，以及统计所有ajax请求的总数并展示到页面中的操作。

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

概述

语法

参数说明

示例1：在所有ajax请求完成后隐藏loading图标

示例2：在所有ajax请求完成后记录请求的总数

总结

相关文章