PHP 結合 JavaScript 實現超連結點擊確認刪除資料完整範例

前言

刪除資料屬高風險操作，必須在前端攔截確認，防止使用者誤觸。本文示範「PHP 後端渲染列表 + JavaScript confirm() 確認 + AJAX/導頁刪除」的經典模式，並使用 PDO 預處理語句防止 SQL 注入。

完整單檔案範例 (list_delete.php)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>會員列表 - 刪除確認範例</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background: #f4f4f4; }
        .btn-del { color: #c00; text-decoration: none; cursor: pointer; }
    </style>
</head>
<body>

<h2>會員列表</h2>

<?php
// ========== 1. 資料庫設定 ==========
$dsn      = 'mysql:host=localhost;dbname=testdb;charset=utf8mb4';
$dbUser   = 'root';
$dbPass   = 'root';
$pdo      = new PDO($dsn, $dbUser, $dbPass, [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
]);

// ========== 2. 處理刪除請求 (放在輸出 HTML 之前) ==========
if (isset($_GET['action']) && $_GET['action'] === 'delete' && isset($_GET['id'])) {
    $id = (int) $_GET['id'];
    try {
        $stmt = $pdo->prepare('DELETE FROM members WHERE id = :id');
        $stmt->bindValue(':id', $id, PDO::PARAM_INT);
        $stmt->execute();
        $msg = $stmt->rowCount() ? '刪除成功' : '找不到該筆資料';
    } catch (PDOException $e) {
        $msg = '刪除失敗：' . $e->getMessage();
    }
    // 導回列表並攜帶訊息
    header('Location: ' . $_SERVER['PHP_SELF'] . '?msg=' . urlencode($msg));
    exit;
}

// ========== 3. 讀取列表資料 ==========
$stmt = $pdo->query('SELECT id, username, email, created_at FROM members ORDER BY id DESC');
$rows = $stmt->fetchAll();
?>

<!-- 顯示操作訊息 -->
<?php if (isset($_GET['msg'])): ?>
    <div style="color: green; margin-bottom: 10px;"><?= htmlspecialchars($_GET['msg']) ?></div>
<?php endif; ?>

<table>
    <thead>
        <tr><th>ID</th><th>帳號</th><th>Email</th><th>建立時間</th><th>操作</th></tr>
    </thead>
    <tbody>
        <?php foreach ($rows as $row): ?>
        <tr>
            <td><?= $row['id'] ?></td>
            <td><?= htmlspecialchars($row['username']) ?></td>
            <td><?= htmlspecialchars($row['email']) ?></td>
            <td><?= $row['created_at'] ?></td>
            <td>
                <a href="javascript:void(0);" 
                   class="btn-del" 
                   onclick="confirmDelete(<?= $row['id'] ?>)">刪除</a>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script>
function confirmDelete(id) {
    if (confirm('確定要刪除此會員嗎？此操作無法復原！')) {
        // 方式 A: 頁面導向 (簡單、可見 URL)
        window.location.href = '?action=delete&id=' + id;

        // 方式 B: AJAX (體驗較好、無刷新) — 取消註解即可使用
        /*
        fetch('?action=delete&id=' + id, {method: 'GET'})
            .then(r => r.text())
            .then(msg => {
                alert(msg);
                location.reload();
            });
        */
    }
}
</script>

</body>
</html>

關鍵安全細節

進階改良：AJAX + JSON 回應 + Toast 提示

<?php
// 刪除 API 端點 (api_delete.php)
header('Content-Type: application/json; charset=utf-8');
session_start();

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo json_encode(['code' => 405, 'msg' => 'Method Not Allowed']);
    exit;
}

// CSRF 驗證
if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'] ?? '')) {
    echo json_encode(['code' => 403, 'msg' => 'Invalid CSRF Token']);
    exit;
}

$id = (int) ($_POST['id'] ?? 0);
if ($id <= 0) {
    echo json_encode(['code' => 400, 'msg' => 'Invalid ID']);
    exit;
}

try {
    $pdo = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8mb4', 'root', 'root');
    $stmt = $pdo->prepare('DELETE FROM members WHERE id = :id');
    $stmt->execute([':id' => $id]);
    echo json_encode([
        'code' => 200,
        'msg'  => $stmt->rowCount() ? '刪除成功' : '資料不存在'
    ]);
} catch (PDOException $e) {
    echo json_encode(['code' => 500, 'msg' => 'Server Error']);
}
?>

<script>
async function confirmDeleteAjax(id) {
    if (!confirm('確定刪除？')) return;
    const formData = new FormData();
    formData.append('id', id);
    formData.append('csrf_token', '<?= $_SESSION['csrf_token'] ?? '' ?>');

    try {
        const res = await fetch('api_delete.php', {method: 'POST', body: formData});
        const data = await res.json();
        alert(data.msg);  // 實務換為 Toast/甜美彈窗
        if (data.code === 200) location.reload();
    } catch (e) {
        alert('網路錯誤，請稍後再試');
    }
}
</script>

結語

「前端確認 + 後端預處理 + 權限驗證 + 軟刪除」是刪除功能的標準四層防護。範例提供從傳統導頁到現代 AJAX 的完整演進，可依專案複雜度選擇適當版本。

1. 上一篇文章： PHP 使用 fopen 建立 UTF-8 編碼檔案完整指南：BOM、編碼轉換與亂碼解決
2. 下一篇文章： PHP header() 實現定時跳轉：refresh 參數用法與編碼陷阱完整指南

PHP 綜合知識

PHP + MySQL + jQuery 實作微博發布系統：從資料表設計到 AJAX 即時更新完整流程

專案需求 前端即時統計輸入字數（140 字限制） AJAX

Windows Server 升級 PHP 版本完整操作指南 (含 IIS 整合)

升級前準備 下載最新 星外 PHP 自動安裝包 (整合

Quercus：在 Java 應用伺服器上運行 PHP 的完整指南

Quercus 是 Caucho 推出的純 Java 實作

PHP 純 CSS 實現動態柱狀圖：零依賴、輕量級數據可視化方案

核心思路 利用 HTML <div> 高度 +