Laravel 8中Sweetalert删除确认按钮点击无响应无控制台报错问题求助

问题原因 #

• 控制器代码中存在dd($id)调试语句，执行后会直接终止程序，后续删除逻辑和返回值都不会执行
• 控制器默认返回重定向响应，但是AJAX请求指定了dataType: 'JSON'，无法解析非JSON格式的返回值，导致没有后续反馈
• 缺少AJAX错误捕获回调，请求异常时不会有报错提示，无法定位问题
• 部分版本SweetAlert2的确认状态判断规则不同，原有e.value的判断逻辑可能不生效

解决步骤 #

1. 调整控制器代码

移除调试语句，返回符合要求的JSON响应：

public function deletepost($id)
{
    try {
        DB::table('posters')->where('id', $id)->delete();
        return response()->json([
            'success' => true,
            'message' => '帖子删除成功'
        ]);
    } catch (\Exception $e) {
        return response()->json([
            'success' => false,
            'message' => '删除失败：' . $e->getMessage()
        ]);
    }
}

2. 检查页面基础配置

确认页面<head>标签内存在CSRF token声明，没有则添加：

<meta name="csrf-token" content="{{ csrf_token() }}">

同时确认jQuery、SweetAlert2依赖库已正确引入，无加载报错。

3. 优化前端JS逻辑

调整SweetAlert确认判断逻辑，新增AJAX错误回调：

function deleteConfirmation(id) {
  swal({
        title: "Delete?",
        text: "Are you sure you want to delete this?",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel!",
        reverseButtons: true
    }).then(function (e) {
        // 适配不同版本SweetAlert的确认状态判断
        if (e.value || e.isConfirmed) {
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'DELETE',
                url: "{{ url('delete-post') }}" + '/' + id,
                data: {_token: CSRF_TOKEN},
                dataType: 'JSON',
                success: function (results) {
                    if (results.success === true) {
                        swal("Done!", results.message, "success");
                        // 可选：删除成功后刷新页面或者移除对应DOM元素
                        // location.reload();
                    } else {
                        swal("Error!", results.message, "error");
                    }
                },
                // 新增错误回调捕获请求异常
                error: function(xhr) {
                    swal("Error!", "请求出错：" + xhr.statusText, "error");
                }
            });
        }
    })
}

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