jQuery API .ajaxStop()

最新推荐文章于 2025-07-05 19:50:58 发布

原创最新推荐文章于 2025-07-05 19:50:58 发布 · 794 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #api #ajaxStop

本文介绍了jQuery中的.ajaxStop()方法，该方法用于在所有的Ajax请求完成后执行一个处理函数。文章详细解释了.ajaxStop()的工作原理，并提供了一个示例来演示如何在Ajax请求结束后隐藏加载信息。

.ajaxStop()

描述: 在AJAX 请求完成时执行一个处理函数。这是一个 Ajax Event。

.ajaxStop(handler())

handler()

类型: Function()

被调用的函数。

每当一个Ajax请求完成，jQuery检查是否有任何其他响应过程中的Ajax请求（愚人码头注：未完成的请求）。如果都执行完成，jQuery就会触发ajaxStop事件，在这个时间点所有处理函数都会使用.ajaxStop()方法注册并执行。如果一个未处理完成的Ajax请求用beforeSend回调函数返回false取消，ajaxStop事件也被触发

观察这种方法，建立一个基本的Ajax加载请求：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <script src="jquery-1.10.2.js"></script>
</head>

<body>
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

<script>

   //在document元素上绑定事件处理器：
	$(".log").ajaxStart(function(){
        $(this).text("触发ajaxStop处理程序。");
    });
	//现在，我们可以使用任何的jQuery方法构建一个Ajax请求：
	$( ".trigger" ).click(function() {
 		$( ".result" ).load( "test.html" );
	});
</script>
</body>
</html>

效果图：

当我们点击class为 trigger 的元素并且Ajax请求完成，这个信息就会显示。

但是从 jQuery 1.8 开始, .ajaxStop() 方法只能绑定到 document元素.

其他注意事项：

如果global选项设置为false，调用$.ajax() 或 $.ajaxStop()方法将不会被触发。

例子:

在Ajax请求停止后隐藏加载信息：

 
        $(document).ajaxStop(function() {
       
              $( "#loading" ).hide();
       
        });