Laravel中如何通过AJAX实现删除功能？点击删除按钮无响应求解决

1 基础依赖检查 #

• 首先确认页面已经正确引入jQuery库，未引入的话所有jQuery绑定的事件都不会触发
• 打开浏览器开发者工具（F12）的「控制台」标签，点击删除按钮后查看是否有JS报错

2 路由检查 #

确保routes/web.php中已经定义了对应的DELETE路由，示例：

use App\Http\Controllers\UserController;

Route::delete('user/delete/{id}', [UserController::class, 'destroyuser'])->middleware('auth');

如果路由有前缀或者用户未登录，会导致请求404/302跳转，无响应。

3 AJAX代码修正 #

原代码存在两个明显问题：

• 「It failed」日志写在AJAX请求外部，无论请求是否成功都会打印，属于逻辑位置错误
• 未添加错误回调，无法定位请求失败的具体原因
• 如果删除按钮是动态渲染生成（比如数据表格异步加载的行），直接绑定click事件不会生效，需要用事件委托

修正后的AJAX代码：

$(document).ready(function () {
    // 动态元素用事件委托写法，兼容静态+动态生成的按钮
    $(document).on('click', '.deleteuser', function() {
        var id = $(this).data("id");
        var token = $(this).data("token");
        $.ajax({
            url: "/user/delete/" + id, // 开头加/避免相对路径拼接错误
            type: 'POST', // 用POST配合_method兼容性更好
            dataType: "JSON",
            data: {
                "_method": 'DELETE',
                "_token": token,
            },
            success: function (res) {
                console.log("删除成功", res);
                // 这里可以加删除后页面逻辑，比如移除当前行
                $(this).closest('tr').remove();
            }.bind(this), // 绑定this指向，方便操作当前按钮所在行
            error: function (xhr) {
                console.log("请求错误", xhr.responseText);
                // 可根据状态码处理：403无权限、404路由不存在、500服务端报错
            }
        });
    });
});

4 控制器代码修正 #

原控制器存在三个问题：

• User::find($id)如果传入不存在的ID会返回null，直接调用delete会抛出500错误
• delete()方法不需要传入$id参数
• 第二个return view('viewuser')永远不会执行，前面已经返回了JSON响应

修正后的控制器代码：

public function destroyuser($id){  
    $this->authorize('Admin'); 
    $user = User::findOrFail($id); // 找不到ID直接返回404错误
    $user->delete();
    return response()->json([
        'success' => 'Record has been deleted successfully!'
    ]);
}

5 调试方法 #

如果还是有问题，打开开发者工具的「网络」标签，点击删除按钮后查看对应请求的状态码和返回内容：

• 419状态码：CSRF token错误，检查按钮的data-token是否正确
• 403状态码：权限校验失败，确认当前登录用户满足authorize('Admin')的要求
• 404状态码：路由地址错误，确认请求URL和定义的路由一致
• 500状态码：服务端代码错误，查看返回的错误详情定位问题

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