AJAX（Asynchronous JavaScript and XML）是一種用于在客戶端和服務器之間發送異步請求的技術。它可以在不刷新整個頁面的情況下更新頁面的一部分內容，提供了更好的用戶體驗和頁面性能。在本文中，我們將討論如何使用AJAX刪除頁面上的一條數據庫記錄。
假設我們有一個用戶列表頁面，每個用戶都有一個刪除按鈕，點擊按鈕可以刪除該用戶的記錄。傳統的做法是通過表單提交來處理刪除操作，這將導致整個頁面的刷新。
現在，我們將使用AJAX來實現這個功能。首先，讓我們定義一個示例頁面，其中包含一個用戶列表和刪除按鈕：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>用戶列表</h1>
<ul id="user-list">
<li>用戶1 <button class="delete-btn" data-id="1">刪除</button></li>
<li>用戶2 <button class="delete-btn" data-id="2">刪除</button></li>
<li>用戶3 <button class="delete-btn" data-id="3">刪除</button></li>
</ul>
<script>
// AJAX刪除按鈕點擊事件處理程序
$(".delete-btn").click(function() {
var userId = $(this).data("id");
$.ajax({
url: "delete_user.php",
type: "POST",
data: { id: userId },
success: function(response) {
// 刪除成功后更新頁面
if (response === "success") {
// 從列表中移除已刪除用戶
$(this).parent("li").remove();
}
}
});
});
</script>
</body>
</html>在上面的代碼中，我們給每個刪除按鈕添加了一個CSS類名“delete-btn”，并通過data屬性存儲了要刪除的用戶的ID。當用戶點擊刪除按鈕時，我們使用AJAX發送一個刪除請求到服務器的“delete_user.php”文件，同時將用戶ID作為參數傳遞。
在服務器端，我們需要編寫一個處理刪除請求的腳本（delete_user.php）。這個腳本將根據接收到的用戶ID從數據庫中刪除對應的記錄，并返回一個成功或失敗的響應。以下是一個簡單的示例：
<?php
// 連接數據庫
$connection = mysqli_connect("localhost", "username", "password", "database");
// 檢查連接是否成功
if(mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit();
}
// 獲取要刪除的用戶ID
$userId = $_POST["id"];
// 刪除用戶記錄
$query = "DELETE FROM users WHERE id = $userId";
$result = mysqli_query($connection, $query);
if ($result) {
echo "success";
} else {
echo "failure";
}
// 關閉數據庫連接
mysqli_close($connection);
?>在上面的代碼中，我們首先建立了與數據庫的連接，然后通過POST方法獲取到要刪除的用戶ID。接下來，我們構建了一個SQL查詢語句，使用mysqli_query函數執行這個查詢并返回結果。最后，我們根據查詢結果返回一個響應。
通過以上的代碼和示例，我們實現了一種使用AJAX來刪除頁面上一條數據庫記錄的方法。這種方法不僅提供了更好的用戶體驗，還提升了頁面性能。你可以根據自己的需求進行進一步的定制和改進。