Laravel中Ajax删除仅首行生效 DELETE路由报405错误排查

Blade模板代码 #

<a href="{{ route('artist_genre_delete',['id' => $genre->id]) }}" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" id="delete" title="Delete"><i class="bi bi-trash-fill"></i></a>

Ajax代码 #

jQuery('#delete').click(function(e){
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    jQuery.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        success: function(result){
            console.log("Sucess");
        }
    });
});
// 原代码此处多写了一个多余的}); 会触发JS语法错误，需删除

路由定义代码 #

Route::get('genre_delete/{id}', 'GenreController@genre_delete')->name('artist_genre_delete');

问题1：仅列表第一行删除按钮可触发，其余行点击无响应 #

故障原因 #

HTML标准规定同一页面中id属性值必须唯一，循环渲染列表行时，每一行的删除按钮都用了id="delete"，jQuery的#delete选择器只会匹配到页面中第一个符合条件的元素，因此只有第一行按钮绑定了点击事件，其余行的按钮没有绑定任何事件，点击自然没有反应。

修复步骤 #

• 把按钮上的重复id替换为通用类名，比如将id="delete"改为class="text-danger js-delete-btn"，避免id重复
• 修改事件绑定逻辑：使用类选择器匹配按钮，同时用事件委托的方式绑定事件，保证后续动态加载的列表元素也能触发事件；另外$.ajaxSetup是全局配置，只需要在页面公共JS部分加载一次即可，不需要每次点击都重复配置
• 删除原Ajax代码末尾多余的});，修复JS语法错误

修复后的Ajax参考代码：

// 全局配置CSRF，放在页面公共JS头部即可
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

// 事件委托绑定点击事件
jQuery(document).on('click', '.js-delete-btn', function(e){
    e.preventDefault();
    jQuery.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        success: function(result){
            console.log("Success");
            // 可在此处补充删除成功后的逻辑：移除对应列表行、弹出成功提示等
        }
    });
});

问题2：路由改为DELETE请求后返回405 Method Not Allowed错误 #

故障原因 #

405错误的核心原因是实际发送的请求方法和路由允许的请求方法不匹配，常见触发场景有两个：

• 只修改了路由定义为Route::delete，但Ajax配置里的type仍然是GET，实际发出去的是GET请求，无法匹配DELETE路由
• 直接发送原生DELETE请求时，部分浏览器、服务器层、Laravel默认CSRF中间件会拦截非POST/GET的特殊请求，导致方法校验不通过

修复方案 #

Laravel官方推荐通过POST请求+_method参数的方式伪装DELETE/PUT等请求，不需要直接发送原生DELETE请求：

1. 修改路由定义为DELETE类型：

   Route::delete('genre_delete/{id}', 'GenreController@genre_delete')->name('artist_genre_delete');
   

2. 修改Ajax请求配置，用POST类型提交，附带_method: 'DELETE'参数：

   jQuery.ajax({
       url: $(this).attr('href'),
       type: 'POST',
       data: {
           _method: 'DELETE'
       },
       success: function(result){
           console.log("Success");
       }
   });
   

额外注意：删除类操作不要使用GET请求，GET请求可能被浏览器预加载、爬虫爬取时误触发，存在数据误删风险，POST伪装DELETE是Laravel资源路由的标准实现方式。

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