資料結構
網路
關係資料庫管理系統
作業系統
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.jquery.com/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.tw/javascript/index.htm')
})
</script>
</body>
</html>示例 2
在以下示例中，我們在網頁上有一個載入螢幕，該螢幕使用 ajaxSend() 事件進行控制。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/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.tw/javascript/index.htm')
})
</script>
</body>
</html>
更新於：2022年7月20日
2K+ 瀏覽量
廣告