Ajax與數據庫交互是一種強大的技術組合，可以實現動態的網頁操作。其中之一就是通過Ajax與數據庫交互實現刪除功能。在實際應用中，我們常常需要刪除數據庫中的某些記錄。通過Ajax與數據庫交互，我們可以在不刷新頁面的情況下，將數據庫中的記錄刪除。這種功能可以大大提升用戶體驗，同時減少服務器的負載。

假設我們有一個博客網站，用戶可以在該網站上發布文章。每篇文章都存儲在數據庫中，并顯示在網頁上。現在，我們要實現一個刪除功能，讓用戶可以刪除他們不想要的文章。這時，我們可以使用Ajax與數據庫交互來實現。

首先，我們需要在網頁中添加一個刪除按鈕。當用戶點擊該按鈕時，我們將通過Ajax將刪除請求發送給服務器。這個請求中會指定要刪除的文章的ID。

<button id="deleteButton" onclick="deleteArticle(123)">刪除文章</button>

接下來，我們需要編寫JavaScript函數來處理刪除請求。這個函數將使用Ajax來與服務器進行交互。當服務器返回刪除成功的響應時，我們將在頁面上將該文章刪除。

function deleteArticle(articleID) {
// 創建Ajax對象
var xhr = new XMLHttpRequest();
// 設置請求參數
xhr.open("POST", "deleteArticle.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 發送請求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 刪除成功，更新頁面
// ...
}
};
xhr.send("articleID=" + articleID);
}

在服務器端，我們需要編寫一個腳本來接收并處理刪除請求。這個腳本將從請求中獲取要刪除的文章的ID，并將其從數據庫中刪除。

// deleteArticle.php
// 連接數據庫
$conn = new mysqli("localhost", "username", "password", "database");
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗：" . $conn->connect_error);
}
// 獲取要刪除的文章的ID
$articleID = $_POST["articleID"];
// 刪除文章
$sql = "DELETE FROM articles WHERE id = " . $articleID;
if ($conn->query($sql) === TRUE) {
echo "刪除成功";
} else {
echo "刪除失敗：" . $conn->error;
}
// 關閉數據庫連接
$conn->close();

當服務器返回刪除成功的響應時，我們可以通過JavaScript來實時更新頁面，將被刪除的文章從頁面中移除。

// 刪除成功，更新頁面
var deletedArticle = document.getElementById("article" + articleID);
deletedArticle.parentNode.removeChild(deletedArticle);

通過以上代碼，我們成功地實現了通過Ajax與數據庫交互來刪除文章的功能。用戶可以點擊刪除按鈕，頁面不會重新加載，被刪除的文章會實時從頁面中移除。這種實時的反饋形式，使得用戶能夠快速、方便地刪除他們不需要的文章。

總之，通過Ajax與數據庫交互，我們可以輕松實現動態的網頁刪除功能。這種技術的使用不僅提升了用戶體驗，還減少了服務器的負載。無論是博客網站還是其他類型的網站，都可以通過Ajax與數據庫交互實現刪除功能，提供更好的用戶體驗。