PHP 結合 JavaScript 實現刪除確認對話框完整範例

刪除操作不可逆，生產環境務必加入二次確認。本文示範「PHP 列表頁 + JS confirm() + AJAX/導向刪除」的經典模式，並採用 PDO 預處理防注入。

完整流程圖解

1. 列表頁：PHP 查詢資料，產生表格，每列「刪除」連結呼叫 del(id)。
2. JS del()：彈出 confirm()，確認後導向 delete.php?id=xxx 或發送 AJAX。
3. 刪除頁：驗證 ID、執行 PDO 預處理 DELETE、回應結果。

列表頁（list.php）核心代碼

<?php
$pdo = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', 'root');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->query('SELECT id, title FROM articles');
?>
<table border="1">
<tr><th>ID</th><th>標題</th><th>操作</th></tr>
<?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)): ?>
<tr>
    <td><?= $row['id'] ?></td>
    <td><?= htmlspecialchars($row['title']) ?></td>
    <td><a href="javascript:del(<?= $row['id'] ?>)">刪除</a></td>
</tr>
<?php endwhile; ?>
</table>

<script>
function del(id) {
    if (confirm('確定要刪除這筆資料嗎？')) {
        // 方式 A：頁面跳轉（簡單）
        window.location.href = 'delete.php?id=' + id;
        // 方式 B：AJAX（體驗更佳，需後端回傳 JSON）
        // fetch('delete.php?id=' + id).then(r => r.json()).then(res => { if(res.ok) location.reload(); });
    }
}
</script>

刪除處理頁（delete.php）

<?php
if (empty($_GET['id'])) exit('參數錯誤');

$pdo = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', 'root');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$stmt = $pdo->prepare('DELETE FROM articles WHERE id = ?');
$stmt->execute([$_GET['id']]);

// 若為 AJAX 請求
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header('Content-Type: application/json');
    echo json_encode(['ok' => $stmt->rowCount() > 0]);
    exit;
}

// 傳統跳轉回列表
header('Location: list.php');

進階建議

• 權限控制：刪除前驗證登入狀態與資料擁有權（如 WHERE id=? AND user_id=?）。
• 軟刪除：實際專案建議加 deleted_at 欄位，而非真正 DELETE。
• CSRF 保護：AJAX 模式下在 <meta name="csrf-token" content="..."> 帶入 Header 驗證。
• 批次刪除：前端勾選多筆 ID 陣列送出，後端 WHERE id IN (...) 搭配 execute($ids)。

此模式簡單、相容性佳，適合中小型專案快速落地；大型系統建議改用 RESTful API + 前端框架（Vue/React）處理狀態管理。