前端刪除表格行並同步後端資料庫：AJAX 傳遞 ID 實作基礎教學

核心流程

1. 前端表格每行附帶資料 ID (如 `data-id="123"`)。
2. 點擊刪除按鈕 → 取得該行 ID → `$.ajax`/`fetch` 送往後端 API。
3. 後端接收 ID → 執行 `DELETE FROM table WHERE id = ?` → 回傳成功/失敗。
4. 前端收到成功回應 → 移除該行 DOM (`tr.remove()`)。

前端代碼 (jQuery)

<table id="dataTable">
  <tr data-id="1"><td>Item 1</td><td><button class="btn-del">刪除</button></td></tr>
  <tr data-id="2"><td>Item 2</td><td><button class="btn-del">刪除</button></td></tr>
</table>

<script>
$('#dataTable').on('click', '.btn-del', function() {
    var $tr = $(this).closest('tr');
    var id = $tr.data('id');
    if (!confirm('確定刪除 ID ' + id + '?')) return;

    $.ajax({
        url: '/api/items/' + id,
        type: 'DELETE', // 或 POST + _method=DELETE
        success: function(res) {
            if (res.success) {
                $tr.fadeOut(300, function() { $(this).remove(); });
            } else {
                alert('刪除失敗：' + res.msg);
            }
        },
        error: function() { alert('網路錯誤'); }
    });
});
</script>

後端處理 (通用邏輯)

• **Java/Spring**：`@DeleteMapping("/api/items/{id}") public Result delete(@PathVariable Long id) { repo.deleteById(id); return Result.ok(); }`
• **PHP/Laravel**：`Route::delete('/api/items/{id}', 'ItemController@destroy');`
• **Node/Express**：`app.delete('/api/items/:id', (req,res)=>{ db.run('DELETE FROM items WHERE id=?', req.params.id); res.json({success:true}); });`

安全與體驗提醒

• **CSRF 保護**：AJAX 請求攜帶 CSRF Token (Header 或 `_token` 參數)。
• **權限驗證**：後端必須驗證當前使用者擁有該資料刪除權限。
• **軟刪除**：生產環境建議 `deleted_at` 欄位標記而非物理刪除。
• **批量刪除**：支援勾選多行 → 發送 ID 陣列 `[1,2,3]` → 後端 `WHERE id IN (...)`。