Laravel通过AJAX无法删除记录 点击确认无响应问题解决

故障根因 #

你的代码存在4个直接导致删除失败的问题：

• ID取值逻辑错误：删除按钮没有设置id属性，只设置了data-id，但JS里用clickEle.attr('id')取值，最终拿到的是undefined，请求地址变成/articles/undefined，完全匹配不到后端路由。另外按钮上写的href="/article/{id}"是单数路径，和你定义的复数路由/articles/{id}也不匹配。
• 没有阻止a标签默认行为：点击a标签时浏览器默认会跳转href属性的地址，你没加阻止默认跳转的代码，会直接打断AJAX请求。
• AJAX没有回调处理：你只写了请求发起逻辑，没写成功/失败的回调，就算请求发出去了，也不会执行后续跳转、提示操作，而且AJAX请求默认不会跟随后端返回的redirect响应。
• 控制器响应不兼容AJAX：你直接返回redirect跳转，对AJAX请求无效，不会触发页面跳转。

分步修复代码 #

1. 修复视图层按钮代码 #

把按钮的href设为无跳转，确认data-id正确赋值：

<a class="js-ajax-deleteConfirm btn btn-danger rounded-pill mr-2" href="javascript:void(0)" data-id="{{$articles->id}}">删除</a>

2. 修复前端JS逻辑 #

补上默认事件阻止、正确ID读取、请求回调处理：

$('.js-ajax-deleteConfirm').click(function (e) {
    // 阻止a标签默认跳转
    e.preventDefault();
    if (!confirm('确定要删除这篇文章吗？')) return false;

    let clickEle = $(this);
    // 从data-id属性读取文章ID
    let id = clickEle.data('id');

    $.ajax({
        url: '/articles/' + id,
        type: 'POST',
        data: {
            "_token": "{{ csrf_token() }}",
            '_method': 'DELETE'
        },
        success: function () {
            alert('文章删除成功');
            // 前端主动跳转到列表页
            window.location.href = '{{ route('articles_index') }}';
        },
        error: function (xhr) {
            alert('删除失败，错误状态码：' + xhr.status);
        }
    })
});

注意：如果这段JS是写在外部独立JS文件里，{{ csrf_token() }}和{{ route('articles_index') }}不会被Blade解析，需要把token写到页面meta标签里再读取，或者把这两个值通过data属性挂到按钮上。

3. 修复控制器逻辑 #

兼容AJAX请求和普通表单请求的响应：

public function delete($id)
{
    $article = Article::findOrFail($id);
    $article->delete();

    // AJAX请求返回JSON响应
    if (request()->ajax()) {
        return response()->json(['code' => 0, 'msg' => '删除成功']);
    }
    // 普通表单请求走原有跳转逻辑
    return redirect()->route('articles_index')->with('msg_success', 'deleted');
}

快速排查技巧 #

• 打开浏览器F12开发者工具，先看「控制台」标签页有没有JS报错，比如jQuery未加载、变量undefined这类问题
• 再切到「网络」标签页，点击删除按钮看发出去的请求地址、状态码：404是路径错，419是CSRF令牌校验失败，500是后端代码报错
• 执行php artisan route:list命令，确认DELETE路由/articles/{id}已经正确注册
• 如果你的Article模型引入了SoftDeletes软删除特性，数据会被标记删除而不是真的从库中移除，不需要的话删掉模型里的软删除trait即可

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