PHP + Ajax 無刷新刪除留言資料實作教學

專案背景

本範例基於留言板系統，使用 jQuery 實現 Ajax 非同步請求與 DOM 操作，達到無刷新刪除留言的使用者體驗。

前端實作步驟

1. 引入 jQuery

<script type="text/javascript" src="lib/jquery.js"></script>

2. 資料列表賦予唯一 ID

每筆留言的容器（如 <table>）設定 id="t{$item.id}"，方便後續精準移除。

3. 編寫刪除 JavaScript 函數

<script>
function delItem(id) {
    $.get('delete.php?id=' + id, null, function(msg) {
        if ('1' == msg) {
            $('#t' + id).remove(); // 成功則移除對應 DOM
        } else {
            alert(msg); // 失敗彈出錯誤訊息
        }
    });
}
</script>

4. 刪除連結綁定事件

<a href="javascript:delItem('{$item.id}')">刪除</a>

後端 delete.php 處理邏輯

<?php
require('common.php');
// 查詢留言資訊
$q = $query->query('SELECT * FROM gb_content WHERE id=' . intval($_GET['id']));
$rs = $query->fetch_array($q);
$error = '';

if ($rs['user_id'] != intval($_SESSION['user_id'])) {
    $error = '該信息你不能刪除，只能刪除自己發布的';
}

if (!$error) {
    $query->query('DELETE FROM gb_content WHERE id=' . intval($_GET['id']));
    // 刪除附件
    if ($rs['user_file']) {
        @unlink('uploads/' . $rs['user_file']);
    }
    echo 1; // 成功回傳 1
} else {
    echo $error; // 失敗回傳錯誤訊息
}
?>

完整 index.tpl 範本結構

包含會員登入狀態顯示、留言列表循環輸出、刪除按鈕綁定、分頁變數 {$pagePanel} 等，詳見原始碼區塊。

關鍵安全點

• 使用 intval() 防止 SQL 注入。
• 驗證 user_id 確保使用者只能刪除自己的留言。
• 刪除資料庫記錄前先查詢附件路徑，同步清理實體檔案。

擴充建議

• 加入 CSRF Token 驗證防止跨站請求偽造。
• 使用 POST 請求替代 GET，符合 RESTful 語義。
• 前端加入載入動畫與二次確認對話框提升體驗。