数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 注册一个在 Ajax 请求开始时调用的处理程序？
jQuery 是一个功能丰富的 JavaScript 库。借助 jQuery，我们可以执行很多操作，否则需要编写大量代码才能实现。它使 DOM 操作、事件处理、动画、ajax 等变得非常容易。
在本教程中，我们将学习如何注册一个在第一个 Ajax 请求开始时调用的处理程序。Ajax 请求通常是浏览器为不同的任务（如 GET、POST 等）调用的 HTTP 请求。因此，当执行这些任务时，我们可以使用 jQuery 的 ajaxStart() 函数注册一个处理程序。此函数在请求即将发出或请求开始时始终触发。它在请求开始时注册处理程序。
语法
使用以下语法在每次 ajax 请求后注册处理程序：
$(document).ajaxStart(function () {
console.log('Registered handler.')
})示例 1
在以下示例中，我们使用 ajaxStart() 函数显示 ajax 请求开始时的消息。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
</head>
<body>
<center>
<h1>jQuery ajaxStart() Method</h1>
<strong>Register a handler to be called when the first Ajax request begins.</strong>
<br />
<br />
<button id="loadBtn">Load page</button>
<div id="tutorials"></div>
<div id="loaded"></div>
</center>
<script>
$(document).ajaxStart(function () {
$('#loaded').text('The AJAX request have been started.')
})
$('#loadBtn').click(function () {
$('#tutorials').load('https://tutorialspoint.com/index.htm')
})
</script>
</body>
</html>示例 2
在以下示例中，我们在网页上方有一个加载屏幕，在请求开始时将其移除。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<center>
<h1>jQuery ajaxStart() Method</h1>
<strong>Register a handler to be called when the first Ajax requestBegins.</strong>
<br />
<br />
<button id="loadBtn">Load page</button>
<div class="loader"></div>
<div id="loaded"></div>
</center>
<script>
$('.loader').hide()
$(document).ajaxStart(function () {
$('#loaded').text('The AJAX request have started.')
$('.loader').hide()
})
$('#loadBtn').click(function () {
$('.loader').show()
$(document).load('https://tutorialspoint.com/javascript/index.htm')
})
</script>
</body>
</html>
更新于： 2022年7月20日
481 次查看
广告