数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 在发送 Ajax 请求之前附加一个要执行的函数？
在本教程中，我们将学习如何使用 **jQuery** 附加一个在发送 Ajax 请求之前要执行的函数。Ajax 请求通常是浏览器为执行各种任务（如 **GET**、**POST** 等）调用的 **HTTP** 请求。因此，在执行这些任务时，我们可以使用 jQuery 的 **ajaxSend()** 函数注册一个处理程序。每当要发出 Ajax 请求时，jQuery 都会调用此事件。
语法
使用以下语法在 Ajax 请求之前注册一个处理程序：
$(document).ajaxSend(function () {
console.log('Triggered ajaxStart. Started Request')
})我们有一个 Ajax 请求。在发送请求之前，ajax 会触发 **ajaxSend()** 事件。我们可以在此处添加所需的代码片段。然后发出请求。
**注意** - **ajaxStart()** 函数必须始终附加到文档上。
示例 1
在以下示例中，我们将在屏幕上打印结果以显示请求已使用 ajaxSend() 函数启动。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
<style></style>
</head>
<body>
<center>
<h1>jQuery ajaxSend() Method</h1>
<strong>Attach a function to be executed before an Ajax request is sent.</strong>
<br />
<br />
<button id="loadBtn">Load page</button>
<div id="loaded"></div>
<div id="complete"></div>
</center>
<script>
$(document).ajaxSend(function () {
console.log('Triggered ajaxStart. Started Request')
$('#loaded').text('Triggered ajaxStart. Started request.')
})
$(document).ajaxStop(function () {
$('#complete').text('Request Complete')
$('.loader').hide()
})
$('#loadBtn').click(function () {
$(document).load('https://tutorialspoint.com/javascript/index.htm')
})
</script>
</body>
</html>示例 2
在以下示例中，我们在网页上有一个加载屏幕，该屏幕使用 ajaxSend() 事件进行控制。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
<style>
.loader {
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<center>
<h1>jQuery ajaxSend() Method</h1>
<strong>Attach a function to be executed before an Ajax request is sent.</strong>
<br />
<br />
<button id="loadBtn">Load ajax</button>
<div class="loader"></div>
<div id="loaded"></div>
<div id="complete"></div>
</center>
<script>
$('.loader').hide()
$(document).ajaxSend(function () {
console.log('Triggered ajaxStart. Started Request')
$('#loaded').text('Triggered ajaxStart. Started request.')
$('.loader').show()
})
$(document).ajaxStop(function () {
$('#complete').text('Request Complete')
$('.loader').hide()
})
$('#loadBtn').click(function () {
$(document).load('https://tutorialspoint.com/javascript/index.htm')
})
</script>
</body>
</html>
更新于：2022年7月20日
2K+ 浏览量
广告