JavaScript 是一種前端開發語言，可以通過其強大的特性來實現動態的網頁交互效果。其中之一的核心技術是通過 Ajax 技術來實現異步數據的請求與響應。本文將討論如何使用 Ajax 添加數據，并在新數據添加成功時立即監聽事件，以便及時對頁面進行更新。 在網頁應用開發中，我們經常遇到需要在不刷新整個頁面的情況下，添加新數據的需求。假設我們正在開發一個待辦事項的應用，用戶可以通過點擊一個按鈕來添加新的任務。當用戶點擊按鈕時，我們希望能夠使用 Ajax 技術向服務器發送請求，并在任務成功添加到數據庫之后，立即將該任務顯示在用戶的任務列表中。 為了實現這一功能，我們可以首先在 HTML 中創建一個按鈕元素，并綁定一個事件處理程序：

<button id="addTaskBtn">添加任務</button>

接下來，我們需要在 JavaScript 中編寫事件監聽代碼。通常，我們會使用 jQuery 這樣的庫來簡化 Ajax 的使用。首先，確保你已經引入了 jQuery 庫，并且可以在 JavaScript 中正常使用。

$(document).ready(function() {
$('#addTaskBtn').click(function() {
// 在這里編寫 AJAX 請求代碼
});
});

在點擊按鈕時，點擊事件處理程序會被調用。在事件處理程序中，我們需要編寫 Ajax 請求的代碼。我們將使用 jQuery 提供的 `$.ajax()` 方法來發送請求，并處理服務器響應。 假設我們的服務器端有一個接口 `/addTask` ，用于在數據庫中添加一個新的任務。我們需要以 POST 方法發送請求，并傳遞任務的名稱和其他必要的參數。

$(document).ready(function() {
$('#addTaskBtn').click(function() {
var taskName = 'New Task'; // 假設這里是從用戶輸入的任務名稱
var postData = {
taskName: taskName
};
$.ajax({
url: '/addTask',
type: 'POST',
data: postData,
success: function(response) {
// 在任務添加成功后，處理服務器的響應
console.log(response);
// 在這里編寫更新頁面的代碼
},
error: function(xhr, status, error) {
// 處理請求錯誤的代碼
console.log(error);
}
});
});
});

在這段代碼中，我們創建了一個名為 `postData` 的對象，其中包含了需要傳遞給服務器的數據。然后，我們使用 `$.ajax()` 方法來發送請求，并在成功時執行一個回調函數來處理響應。在成功的回調函數中，我們可以更新頁面以反映新任務的添加結果。 例如，我們可以通過在任務列表中添加一個新的 `

` 元素，并設置其內容為新任務的名稱：

$(document).ready(function() {
$('#addTaskBtn').click(function() {
// ...
$.ajax({
// ...
success: function(response) {
// ...
// 更新頁面的代碼
var newTaskElement = '<li>' + taskName + '</li>';
$('#taskList').append(newTaskElement);
},
// ...
});
});
});

通過在列表 `#taskList` 的末尾添加新的 `

` 元素，我們可以實現新任務的即時顯示。 總結起來，我們可以通過使用 Ajax 技術來實現添加數據并監聽事件的功能。通過發送異步請求，我們可以向服務器添加新的數據，并在數據成功添加之后立即更新頁面，以提供更好的用戶體驗。無論是添加任務到待辦事項應用還是更新新聞列表，Ajax 提供了一種高效的方法來處理數據的添加和實時更新。