AJAX已成為現代Web開發中不可或缺的技術之一。其中，使用AJAX與數據庫進行增刪改操作，可以實現動態更新數據的功能，提供了更好的用戶體驗。本文將介紹如何使用AJAX與數據庫進行增刪改操作，并通過實際例子進行說明。

使用AJAX進行數據庫數據的增加

數據庫數據的增加是一個常見的需求。使用AJAX與數據庫進行增加操作時，我們可以通過頁面上的表單輸入獲取用戶輸入的數據，并將其發送到服務器端，再通過服務器端的腳本將數據插入到數據庫。最后，使用AJAX從服務器端獲取到已插入的數據，并動態地更新到頁面上。

<script>
function addData() {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var newData = "<tr><td>" + response.name + "</td><td>" + response.age + "</td></tr>";
document.getElementById('dataList').innerHTML += newData;
}
};
xhttp.open("POST", "addData.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name + "&age=" + age);
}
</script>

代碼中，我們首先獲取用戶輸入的姓名和年齡，然后創建 XMLHttpRequest 對象，設置回調函數來處理服務器端的響應。然后，我們將數據發送到服務器端的 "addData.php" 腳本，該腳本將數據插入到數據庫中。最后，通過解析服務器端的響應，將新增的數據使用HTML標簽生成，并追加到頁面上的數據列表中。

使用AJAX進行數據庫數據的刪除

數據庫數據的刪除也是一個常見的需求。使用AJAX與數據庫進行刪除操作時，我們可以通過獲取用戶點擊的刪除按鈕所對應的數據ID，并將其發送到服務器端，再通過服務器端的腳本將該數據從數據庫中刪除。最后，使用AJAX更新頁面上的數據列表，將已刪除的數據從頁面上移除。

<script>
function deleteData(id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('data' + id).remove();
}
};
xhttp.open("GET", "deleteData.php?id=" + id, true);
xhttp.send();
}
</script>

代碼中，我們創建 XMLHttpRequest 對象，并設置回調函數來處理服務器端的響應。然后，我們將要刪除的數據ID發送到服務器端的 "deleteData.php" 腳本，該腳本將該數據從數據庫中刪除。最后，通過操作DOM，將已刪除的數據從頁面上移除。

使用AJAX進行數據庫數據的修改

數據庫數據的修改也是一個常見的需求。使用AJAX與數據庫進行修改操作時，我們可以通過獲取用戶要修改的數據ID和修改后的數據，并將其發送到服務器端，再通過服務器端的腳本將該數據更新到數據庫中。最后，使用AJAX更新頁面上的數據列表，將已修改的數據在頁面上實時更新。

<script>
function editData(id) {
var newName = document.getElementById('newName' + id).value;
var newAge = document.getElementById('newAge' + id).value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
document.getElementById('name' + id).innerHTML = response.name;
document.getElementById('age' + id).innerHTML = response.age;
}
};
xhttp.open("POST", "editData.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("id=" + id + "&newName=" + newName + "&newAge=" + newAge);
}
</script>

代碼中，我們首先獲取用戶輸入的修改后的姓名和年齡，然后創建 XMLHttpRequest 對象，設置回調函數來處理服務器端的響應。然后，我們將要修改的數據ID和修改后的數據發送到服務器端的 "editData.php" 腳本，該腳本將數據更新到數據庫中。最后，通過解析服務器端的響應，即更新后的數據，將其更新到頁面上。

通過使用AJAX與數據庫進行增刪改操作，我們可以實現動態更新數據的功能，提供更好的用戶體驗。以上是AJAX使用數據庫做增刪改的簡要介紹和示例代碼，希望對您有所幫助。