PHP集成Sweet Alert删除确认弹窗失效：直接跳转无弹窗

嘿，这个问题我之前也碰到过，咱们一步步来搞定它～

你的代码之所以直接跳转而不显示弹窗，主要是两个问题：

1. 链接的默认跳转行为没被阻止：onclick="return confirmation()"里，你的confirmation()函数没有返回false，浏览器会直接执行跳转逻辑；
2. Sweet Alert的.then()是异步执行的：函数会先返回undefined，浏览器不会等用户完成确认操作，就直接跳转到删除URL了。

不需要立刻改成表单，先调整JS函数，手动阻止默认行为，等用户确认后再执行跳转：

首先修改HTML的onclick事件，传递event对象：

<div class="delete">
    <a onclick="confirmation(event)" href="'.URLROOT.'/dashboards/delete_note/'.htmlspecialchars($note->note_id).'/'.$data['table'] .'">
        <i class="far fa-trash-alt"></i>
    </a>
</div>

然后更新你的Sweet Alert函数：

function confirmation(event) {
    // 先阻止链接的默认跳转行为
    event.preventDefault();
    // 保存要跳转的删除URL
    const deleteUrl = event.target.closest('a').href;

    swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this note!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            swal("Poof! Your note has been deleted!", { icon: "success", })
            .then(() => {
                // 用户确认删除后，手动跳转到删除URL
                window.location.href = deleteUrl;
            });
        } else {
            swal("Your note is safe!");
        }
    });
}

从Web开发的最佳实践来说，删除操作不建议用GET请求（链接跳转就是GET）——这种方式可能被浏览器缓存、爬虫误触发，或者用户不小心误点。改用POST表单会更安全规范：

首先把原来的链接改成表单：

<div class="delete">
    <form action="'.URLROOT.'/dashboards/delete_note/'.htmlspecialchars($note->note_id).'/'.$data['table'] .'" method="POST">
        <button type="submit" onclick="return confirmation(event)">
            <i class="far fa-trash-alt"></i>
        </button>
    </form>
</div>

然后更新JS函数，阻止表单默认提交，用户确认后再提交表单：

function confirmation(event) {
    event.preventDefault();
    const form = event.target.closest('form');

    swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this note!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            swal("Poof! Your note has been deleted!", { icon: "success", })
            .then(() => {
                // 用户确认后，提交表单执行删除
                form.submit();
            });
        } else {
            swal("Your note is safe!");
        }
    });
    // 返回false确保默认行为被彻底阻止
    return false;
}

两种方案都能解决你的问题，第二种更符合安全规范，推荐优先使用～

内容的提问来源于stack exchange，提问作者James