今天我們要介紹的是jQuery Ajax應用實例。首先，讓我們來看一下HTML代碼：
<html> <head> <title>jQuery Ajax應用實例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="getDataBtn">獲取數據</button> <div id="data"></div> </body> </html>
這里我們引用了jQuery的庫文件，并在body標簽中添加了一個按鈕和一個數據展示框。接下來，我們需要編寫jQuery的Ajax代碼。讓我們來看一下：
<script>
$(document).ready(function(){
$("#getDataBtn").click(function(){
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: 'GET',
dataType: 'json',
success: function(jsonData){
$("#data").html(jsonData.body);
},
error: function(xhr, textStatus, errorMessage){
alert('Error! ' + errorMessage);
}
});
});
});
</script>在這里，我們首先在文檔就緒后添加了一個事件處理程序，該處理程序在按鈕被單擊時觸發。然后，我們使用jQuery的ajax()函數來與服務器進行通信。其中，我們設置了請求的URL、請求類型和數據類型，并指定了請求成功后要執行的代碼和請求失敗時要執行的代碼。
最后，讓我們來看一下數據展示框中的內容：
<div id="data">{"userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit?suscipit ..."}</div>我們可以看到，通過ajax()函數返回的JSON對象被寫入了數據展示框中。
這就是一個jQuery Ajax應用實例。使用ajax()函數，我們可以輕松地與服務器進行通信，并動態地更新網頁內容。
上一篇在網頁中鏈接css
下一篇在線生成css3前綴