PHP 實現操作確認彈窗（JavaScript 交互）

Web 開發中常需在刪除等危險操作前彈出確認對話框。本文展示 PHP 輸出 JavaScript 確認彈窗的標準模式，實現「確定執行 / 取消中斷」邏輯。

核心代碼

<script>
function confirmDelete() {
    if (confirm("確定要刪除嗎？")) {
        alert('刪除成功！');
        return true;  // 允許表單提交/鏈接跳轉
    } else {
        return false; // 阻止默認行為
    }
}
</script>

<button onclick="return confirmDelete()">確定刪除</button>

關鍵要點

1. return 關鍵字：事件處理器必須 return 函數結果，才能阻止默認行為
2. confirm() 返回 true(確定) / false(取消)
3. alert() 僅提示，不影響流程

實戰應用模式

1. 表單提交確認

<form action="delete.php" method="post" onsubmit="return confirmDelete()">
    <input type="hidden" name="id" value="123">
    <button type="submit">刪除記錄</button>
</form>

2. 鏈接跳轉確認

<a href="delete.php?id=123" onclick="return confirmDelete()">刪除</a>

3. AJAX 異步刪除確認

<script>
function ajaxDelete(id) {
    if (!confirm("確定刪除 ID: " + id + "？")) return;
    
    fetch('delete.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'id=' + id
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert('刪除成功');
            location.reload();
        } else {
            alert('失敗: ' + data.msg);
        }
    });
}
</script>

<button onclick="ajaxDelete(123)">異步刪除</button>

進階：自定義模態框（替代原生 confirm）

原生 confirm() 樣式不可控，現代項目常用 Bootstrap Modal / SweetAlert2 / Layer 等：

<!-- SweetAlert2 示例 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
async function swalDelete(id) {
    const result = await Swal.fire({
        title: '確定刪除？',
        text: '此操作不可恢復！',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '是的，刪除',
        cancelButtonText: '取消'
    });
    
    if (result.isConfirmed) {
        // 執行刪除邏輯
        Swal.fire('已刪除！', '', 'success');
    }
}
</script>

PHP 端處理建議

• 即使前端攔截，後端必須再次驗證權限
• 使用 CSRF Token 防止跨站請求偽造
• 軟刪除（deleted_at）優於硬刪除
• 記錄操作日誌：用戶、時間、操作、影響數據

確認彈窗是前端攔截，真正的安全還需後端多層防護。