文章主題：使用Ajax和JavaScript實現增刪改查

在Web開發中，實現增刪改查（CRUD）操作是非常常見的需求。而使用Ajax和JavaScript可以使這些操作變得更加動態和高效。本文將介紹如何使用Ajax和JavaScript實現增刪改查，并通過舉例說明其強大的功能。

一、增加（Create）

添加新數據是一個常見的操作。通常，在用戶提交表單時，數據將被發送到服務器，然后刷新整個頁面以顯示新的數據。然而，使用Ajax和JavaScript可以使新增數據的過程更加流暢。例如，我們可以在不刷新整個頁面的情況下，將數據發送到服務器并將其添加到頁面中。

<form id="addForm">
<input type="text" id="name" name="name" placeholder="姓名">
<input type="text" id="age" name="age" placeholder="年齡">
<button type="button" onclick="addData()">添加</button>
</form>
<script>
function addData() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "add.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 通過DOM操作將新數據添加到頁面中
var newData = JSON.parse(xhr.responseText);
var newRow = document.createElement("tr");
newRow.innerHTML = "<td>" + newData.name + "</td><td>" + newData.age + "</td>";
document.getElementById("data").appendChild(newRow);
}
};
xhr.send("name=" + name + "&age=" + age);
}
</script>

二、查詢（Retrieve）

查詢數據是一個常見的操作。傳統的方式是刷新整個頁面或者通過跳轉到另一個頁面來顯示查詢結果。但使用Ajax和JavaScript，我們可以在不刷新頁面的情況下進行查詢，并實時更新頁面的內容。例如，我們可以通過輸入關鍵字實時搜索數據庫，并顯示匹配的結果。

<input type="text" id="searchInput" onkeyup="searchData()" placeholder="請輸入關鍵字">
<ul id="searchResults"></ul>
<script>
function searchData() {
var keyword = document.getElementById("searchInput").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 通過DOM操作將查詢結果顯示在頁面上
var results = JSON.parse(xhr.responseText);
var searchResults = document.getElementById("searchResults");
searchResults.innerHTML = "";
results.forEach(function(result) {
var li = document.createElement("li");
li.textContent = result.name;
searchResults.appendChild(li);
});
}
};
xhr.send();
}
</script>

三、更新（Update）

更新數據是一個常見的操作。通常，在用戶點擊編輯按鈕時，頁面會跳轉到一個包含表單的新頁面，用戶可以在該表單中修改數據。然而，使用Ajax和JavaScript可以使更新操作更加直觀和高效。例如，我們可以在頁面上直接修改數據并將更改發送到服務器。

<table id="data">
<tr><td>張三</td><td>18</td><button onclick="editData(1)">編輯</button></tr>
<tr><td>李四</td><td>20</td><button onclick="editData(2)">編輯</button></tr>
</table>
<script>
function editData(id) {
var name = prompt("請輸入姓名");
var age = prompt("請輸入年齡");
var xhr = new XMLHttpRequest();
xhr.open("POST", "edit.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 通過DOM操作更新頁面上的數據
var editedData = JSON.parse(xhr.responseText);
var row = document.getElementById("data").rows[id - 1];
row.cells[0].textContent = editedData.name;
row.cells[1].textContent = editedData.age;
}
};
xhr.send("id=" + id + "&name=" + name + "&age=" + age);
}
</script>

四、刪除（Delete）

刪除數據是一個常見的操作。傳統的方式是在執行刪除操作后刷新整個頁面。使用Ajax和JavaScript，則可以在不刷新整個頁面的情況下刪除數據，并實時更新頁面的內容。例如，我們可以在頁面上點擊刪除按鈕后，將數據從頁面中移除并發送到服務器進行刪除。

<table id="data">
<tr id="1"><td>張三</td><td>18</td><button onclick="deleteData(1)">刪除</button></tr>
<tr id="2"><td>李四</td><td>20</td><button onclick="deleteData(2)">刪除</button></tr>
</table>
<script>
function deleteData(id) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "delete.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 通過DOM操作將數據從頁面中移除
var row = document.getElementById(id);
row.parentNode.removeChild(row);
}
};
xhr.send("id=" + id);
}
</script>

通過以上示例，我們可以看到使用Ajax和JavaScript可以使增刪改查操作變得更加靈活、快速和用戶友好。它們使我們能夠在不刷新整個頁面的情況下，實現數據的交互和更新，提供了更好的用戶體驗。