如何用SweetAlert替代原生confirm实现删除按钮确认弹窗？

我来帮你搞定这个问题！你遇到的核心问题是SweetAlert是异步弹窗，和原生confirm()的同步逻辑完全不同，不能直接用if(swal(...))这种方式判断用户选择。另外你的原代码里还有个小错误：AJAX请求的data参数写错了，下面是修正后的完整方案：

第一步：确保引入SweetAlert依赖 #

首先要确保你已经在页面里引入了SweetAlert（现在主流用的是SweetAlert2，功能更全）的CSS和JS文件：

<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

（注：如果用的是旧版SweetAlert，语法会有差异，下面以SweetAlert2为例）

第二步：修正后的完整代码 #

$(document).on('click', '.delete', function(){
    var course_id = $(this).attr("id");
    
    // 用SweetAlert2弹出确认弹窗
    Swal.fire({
        title: '确定要删除吗？',
        text: "删除后无法恢复，请谨慎操作！",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '确认删除',
        cancelButtonText: '取消'
    }).then((result) => {
        // 用户点击确认按钮时执行AJAX删除
        if (result.isConfirmed) {
            $.ajax({
                url: "ajax/delete.php",
                method: "POST",
                data: { course_id: course_id }, // 修正原代码的参数错误：把user_id改为course_id
                success: function(data) {
                    Swal.fire(
                        '删除成功！',
                        data,
                        'success'
                    );
                    dataTable.ajax.reload(); // 重新加载表格数据
                },
                error: function() {
                    // 增加错误处理，提升用户体验
                    Swal.fire(
                        '操作失败！',
                        '删除请求出错，请稍后重试',
                        'error'
                    );
                }
            });
        }
        // 用户点击取消的话，什么都不做，自动关闭弹窗
    });
});

关键说明 #

1. 异步逻辑处理：SweetAlert的弹窗是异步的，必须通过.then()方法来接收用户的操作结果（result.isConfirmed表示用户点击了确认按钮），不能像原生confirm()那样用同步的if判断。
2. 修正AJAX参数：你原代码里的data:{user_id,user_id}是错误的，因为你获取的是course_id，所以应该写成{ course_id: course_id }，保证参数名和后端接收的一致。
3. 错误处理：增加AJAX的error回调，可以在请求失败时给用户提示，让交互更友好。

如果你用的是旧版的SweetAlert（非SweetAlert2），可以用下面的写法：

$(document).on('click', '.delete', function(){
    var course_id = $(this).attr("id");
    swal({
        title: "确定要删除吗？",
        text: "删除后无法恢复！",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        closeOnConfirm: false
    },
    function(isConfirm){
        if (isConfirm) {
            $.ajax({
                url:"ajax/delete.php",
                method:"POST",
                data:{course_id: course_id},
                success:function(data) {
                    swal("已删除！", data, "success");
                    dataTable.ajax.reload();
                }
            });
        }
    });
});

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