在Web開發中，常常會遇到需要刪除一個列表中的某行數據的需求。使用傳統的同步請求方式，頁面會因為等待服務器響應而卡頓，用戶體驗不佳。而借助AJAX技術，我們可以通過異步請求來刪除列表中的一行數據，無需刷新整個頁面，使用戶體驗更為流暢。本文將分享一個簡單的例子，展示如何使用AJAX來實現刪除列表一行數據的功能。
假設我們有一個待辦事項的列表，在列表中的每個項目旁邊都有一個“刪除”按鈕，點擊該按鈕可以刪除對應的事項。我們使用HTML和CSS創建一個列表，并使用AJAX來處理刪除按鈕的點擊事件。
<html>
<head>
<title>刪除列表行數據</title>
<style>
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>待辦事項列表</h2>
<ul class="todo-list">
<li class="todo-item">
<span>第一件事</span>
<button class="delete-btn">刪除</button>
</li>
<li class="todo-item">
<span>第二件事</span>
<button class="delete-btn">刪除</button>
</li>
<li class="todo-item">
<span>第三件事</span>
<button class="delete-btn">刪除</button>
</li>
</ul>
</body>
</html>在上述代碼中，我們創建了一個簡單的待辦事項列表，每個事項都有一個刪除按鈕。接下來，我們使用JavaScript和AJAX來處理刪除按鈕的點擊事件，從而實現刪除對應列表行數據的功能。
document.querySelectorAll('.delete-btn').forEach((btn) =>{
btn.addEventListener('click', (e) =>{
const todoItem = e.target.parentNode;
const todoList = todoItem.parentNode;
todoList.removeChild(todoItem);
// 發送AJAX請求，告知服務器刪除該行數據
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('刪除成功');
} else {
console.error('刪除失敗');
}
}
};
xhr.open('DELETE', '/api/delete/todo', true);
xhr.send();
});
});上述代碼使用querySelectorAll方法選中所有的刪除按鈕，為每個按鈕綁定了點擊事件。當按鈕被點擊時，會觸發刪除行數據的操作。我們首先找到刪除按鈕所在的li元素，然后找到它的父元素ul，接著使用ul的removeChild方法將該行數據從列表中移除。
接下來，我們使用AJAX發送一個DELETE請求給服務器，告知服務器刪除對應行數據。在以上例子中，我們發送的請求URL為“/api/delete/todo”，你需要根據自己的項目具體情況來修改URL。服務器收到請求后，會執行相應的刪除操作。如果刪除成功，AJAX的狀態為200，否則為其他狀態碼。
總結起來，AJAX可以幫助我們實現刪除列表一行數據的功能，通過異步請求，無需刷新整個頁面即可刪除指定數據，提升用戶體驗。我們的例子展示了如何使用AJAX處理刪除按鈕的點擊事件，并進行相應的刪除操作。在實際開發中，你可以根據自己的需求和后端API來修改代碼。希望本文能對你理解和應用AJAX刪除列表行數據有所幫助。