AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用程序的技術(shù)。通過(guò)AJAX，我們可以實(shí)現(xiàn)實(shí)時(shí)更新數(shù)據(jù)的效果，而無(wú)需刷新整個(gè)頁(yè)面。本文將分享如何使用AJAX刪除數(shù)據(jù)庫(kù)中的一行數(shù)據(jù)。

假設(shè)我們有一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表，列表中的每一行都有一個(gè)刪除按鈕。當(dāng)用戶點(diǎn)擊刪除按鈕時(shí)，我們希望通過(guò)AJAX從數(shù)據(jù)庫(kù)中刪除此行數(shù)據(jù)，并且無(wú)需刷新整個(gè)頁(yè)面即可更新列表。

首先，我們需要編寫前端代碼來(lái)處理AJAX請(qǐng)求。以下是一個(gè)示例：

function deleteRow(id) {
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 配置請(qǐng)求
xhr.open("POST", "delete.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 監(jiān)聽請(qǐng)求狀態(tài)變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請(qǐng)求成功，更新列表
var response = JSON.parse(xhr.responseText);
if (response.success) {
// 刪除成功
var row = document.getElementById("row-" + id);
row.parentNode.removeChild(row);
} else {
// 刪除失敗
alert("刪除失敗，請(qǐng)稍后重試。");
}
}
}
// 發(fā)送請(qǐng)求
xhr.send("id=" + id);
}

以上代碼定義了一個(gè)名為`deleteRow`的函數(shù)，接受一個(gè)參數(shù)`id`，代表需要?jiǎng)h除的數(shù)據(jù)行的ID。它首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，然后配置了一個(gè)POST請(qǐng)求到`delete.php`文件。`delete.php`是我們將在后臺(tái)編寫的用于處理刪除請(qǐng)求的文件。

在請(qǐng)求的回調(diào)函數(shù)中，我們首先檢查請(qǐng)求的狀態(tài)和響應(yīng)狀態(tài)碼。如果請(qǐng)求成功（狀態(tài)碼為200），則將響應(yīng)文本解析為JSON對(duì)象。根據(jù)返回的`success`屬性判斷是否刪除成功。如果刪除成功，則通過(guò)ID找到對(duì)應(yīng)的行并從DOM中刪除之；否則，彈出一個(gè)提示框告知用戶刪除失敗。

現(xiàn)在我們需要編寫后臺(tái)的腳本來(lái)處理AJAX請(qǐng)求并從數(shù)據(jù)庫(kù)中刪除數(shù)據(jù)。以下是一個(gè)示例PHP代碼：

connect_error) {
die("數(shù)據(jù)庫(kù)連接失敗：" . $conn->connect_error);
}
// 獲取AJAX請(qǐng)求的參數(shù)
$id = $_POST["id"];
// 執(zhí)行刪除操作
$sql = "DELETE FROM todolist WHERE id = $id";
if ($conn->query($sql) === TRUE) {
// 刪除成功
$response["success"] = true;
} else {
// 刪除失敗
$response["success"] = false;
}
// 將響應(yīng)以JSON格式返回給前端
echo json_encode($response);
// 關(guān)閉數(shù)據(jù)庫(kù)連接
$conn->close();
?>

以上PHP代碼首先連接到數(shù)據(jù)庫(kù)，然后獲取AJAX請(qǐng)求中傳遞過(guò)來(lái)的`id`參數(shù)，并使用該ID構(gòu)造一個(gè)刪除語(yǔ)句。接著，執(zhí)行刪除語(yǔ)句，并通過(guò)判斷執(zhí)行結(jié)果將`success`屬性設(shè)置為`true`或`false`。最后，將響應(yīng)以JSON格式返回給前端。

通過(guò)以上代碼，我們實(shí)現(xiàn)了使用AJAX刪除數(shù)據(jù)庫(kù)中的一行數(shù)據(jù)的功能。當(dāng)用戶點(diǎn)擊刪除按鈕時(shí)，前端代碼將發(fā)送一個(gè)AJAX請(qǐng)求到后臺(tái)，后臺(tái)會(huì)根據(jù)請(qǐng)求參數(shù)刪除對(duì)應(yīng)的數(shù)據(jù)，然后將刪除結(jié)果返回給前端，前端再根據(jù)結(jié)果更新列表。

這個(gè)例子只是展示了如何使用AJAX刪除數(shù)據(jù)庫(kù)中的一行數(shù)據(jù)，實(shí)際應(yīng)用中可能會(huì)有更復(fù)雜的需求。但無(wú)論如何，AJAX都可以為我們提供一種實(shí)時(shí)交互的方式，使用戶體驗(yàn)更加友好。