ThinkPHP AJAX 非同步刪除實作：前後端完整交互流程解析

ThinkPHP AJAX 非同步刪除實作：前後端完整交互流程解析

在 ThinkPHP 框架下實作「不重新整理頁面即可刪除資料」的 AJAX 功能，是提升使用者體驗的關鍵技術。本文完整拆解從前端觸發、JS 請求、後端處理到前端回饋的完整流程。

完整交互流程圖解

用戶點擊「刪除」連結
        ↓
jQuery 綁定 click 事件 → 彈出確認對話框
        ↓
取得該筆資料的 ID (data-id 或 href 參數)
        ↓
發送 AJAX 請求到後端 Controller (JSON 格式)
        ↓
後端驗證權限 → 執行刪除 SQL → 回傳 JSON 結果
        ↓
前端接收回應 → 成功則移除 DOM 元素 / 失敗則提示錯誤

前端實作 (View 層)

HTML 結構

<!-- 列表項目 -->
<div class="list-item" data-id="<?php echo $val['id']; ?>">
    <span><?php echo $val['title']; ?></span>
    <a href="javascript:void(0);" class="delete-btn">刪除</a>
</div>

jQuery AJAX 邏輯

<script src="/Public/js/jquery.min.js"></script>
<script>
$(function() {
    // 事件委派：適用於動態新增的元素
    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();
        var $btn = $(this);
        var $item = $btn.closest('.list-item');
        var id = $item.data('id'); // 從父層 data-id 取得
        
        if (!confirm('確定要刪除這筆資料嗎？此操作無法復原。')) {
            return;
        }
        
        // 視覺回饋：按鈕禁用 + 載入狀態
        $btn.prop('disabled', true).text('刪除中...');
        
        $.ajax({
            url: '/Search/index.php/Jason/delete', // ThinkPHP URL 格式
            type: 'POST',                          // 建議用 POST 執行刪除
            data: { id: id },
            dataType: 'json',
            success: function(res) {
                if (res.code === 1) { // 成功
                    // 動畫移除：slideUp 後再移除 DOM
                    $item.slideUp('normal', function() {
                        $(this).remove();
                        // 可選：檢查列表是否為空，顯示「無資料」提示
                        if ($('.list-item').length === 0) {
                            $('.list-container').html('<p class="empty">暫無資料</p>');
                        }
                    });
                } else { // 失敗
                    alert('刪除失敗：' + (res.msg || '未知錯誤'));
                    $btn.prop('disabled', false).text('刪除');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX 錯誤:', status, error);
                alert('請求異常，請稍後再試');
                $btn.prop('disabled', false).text('刪除');
            }
        });
    });
});
</script>

後端實作 (Controller 層)

JasonAction.class.php

<?php
class JasonAction extends Action {
    public function delete() {
        // 僅接受 POST 請求
        if (!$this->isPost()) {
            $this->ajaxReturn(['code' => 0, 'msg' => '請求方式錯誤']);
        }
        
        // 驗證用戶登入狀態
        $userId = session('uid');
        if (empty($userId)) {
            $this->ajaxReturn(['code' => 0, 'msg' => '請先登入']);
        }
        
        // 取得並驗證 ID
        $id = I('post.id', 0, 'intval');
        if ($id <= 0) {
            $this->ajaxReturn(['code' => 0, 'msg' => '參數錯誤']);
        }
        
        // 執行刪除 (假設模型名為 Article)
        $model = M('Article'); // 或 D('Article') 若有邏輯層
        $result = $model->where(['id' => $id, 'uid' => $userId])->delete();
        // 注意：加上 uid 條件防止越權刪除他人資料
        
        if ($result !== false) {
            $this->ajaxReturn(['code' => 1, 'msg' => '刪除成功']);
        } else {
            $this->ajaxReturn(['code' => 0, 'msg' => '刪除失敗，資料不存在或無權限']);
        }
    }
}
?>

關鍵安全性考量

進階優化建議

1. 批次刪除：支援勾選多筆後一次 AJAX 送出陣列 ids: [1,2,3]
2. 樂觀鎖：資料表加 version 欄位，更新時檢查版本號防止併發衝突
3. 操作日誌：刪除前寫入 log 表 (操作者、時間、IP、刪除內容 JSON)
4. 權限細分：整合 RBAC，判斷當前角色是否具備 delete 權限
5. 前端框架整合：若使用 Vue/React，改用組件化狀態管理，不直接操作 DOM

ThinkPHP 3.2+ 寫法差異

<?php
namespace Home\Controller;
use Think\Controller;

class JasonController extends Controller {
    public function delete() {
        if (!IS_POST) $this->ajaxReturn(['code'=>0, 'msg'=>'請求方式錯誤']);
        
        $id = I('post.id', 0, 'intval');
        $uid = session('uid');
        
        $res = M('Article')->where(['id'=>$id, 'uid'=>$uid])->delete();
        $this->ajaxReturn($res ? ['code'=>1] : ['code'=>0, 'msg'=>'刪除失敗']);
    }
}
?>

除錯技巧

• 瀏覽器開發者工具 → Network 面板檢查 Request/Response
• ThinkPHP 開啟 'SHOW_PAGE_TRACE' => true 查看 SQL 日誌
• 後端 trace() 或 Log::write() 記錄關鍵變數
• 前端 console.log(res) 確認回傳結構