Laravel使用JavaScript调用Delete删除方法跳转show路由问题

你现在跳转异常的核心原因有两个：

• Laravel默认生成的资源路由中，comics.destroy 路由只匹配 DELETE 类型的请求，你用window.location.href发起的是GET请求，会被路由系统匹配到同路径下的comics.show（GET类型，对应详情页）路由，自然不会进入destroy方法。
• Laravel的Web中间件组默认开启CSRF防护，所有POST/PUT/DELETE/PATCH类型的写操作请求，必须携带合法CSRF令牌，否则会直接返回419状态码错误。

1. 提前配置CSRF令牌 #

在Blade模板的<head>标签内添加meta标签存储CSRF令牌，方便后续JS读取：

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

2. 修正删除请求逻辑 #

不要用直接跳转URL的方式发请求，选择以下任意一种方式实现即可：

方式一：动态生成表单提交（无依赖，兼容性最好） #

修改你的confirmClick函数，动态构建符合Laravel要求的POST表单，通过隐藏字段模拟DELETE请求、携带CSRF令牌：

function confirmClick(){
    // 注意：idComic 是你打开删除模态框时提前存好的、待删除的漫画ID
    let url = "{{route('comics.destroy', ':id') }}".replace(':id', idComic);

    // 动态创建表单
    const deleteForm = document.createElement('form');
    deleteForm.method = 'POST';
    deleteForm.action = url;

    // 添加_method字段，声明这是DELETE请求
    const methodField = document.createElement('input');
    methodField.type = 'hidden';
    methodField.name = '_method';
    methodField.value = 'DELETE';
    deleteForm.appendChild(methodField);

    // 添加CSRF令牌字段
    const csrfField = document.createElement('input');
    csrfField.type = 'hidden';
    csrfField.name = '_token';
    csrfField.value = document.querySelector('meta[name="csrf-token"]').content;
    deleteForm.appendChild(csrfField);

    // 提交表单后移除临时DOM
    document.body.appendChild(deleteForm);
    deleteForm.submit();
    document.body.removeChild(deleteForm);
}

方式二：Ajax异步提交（适合做无刷新交互） #

如果项目里引入了axios等请求库，可以直接发异步DELETE请求，提交成功后再跳转列表页：

// 全局配置axios请求默认携带CSRF头
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

async function confirmClick(){
    const url = "{{route('comics.destroy', ':id') }}".replace(':id', idComic);
    try {
        await axios.delete(url);
        // 删除成功跳转到列表页
        window.location.href = "{{ route('comics.index') }}";
    } catch (e) {
        console.error('删除操作失败', e);
    }
}

3. 修正模态框按钮属性 #

你的模态框没有包裹<form>标签，两个按钮写type="submit"没有实际意义，改成type="button"即可，避免意外触发页面上其他表单的提交逻辑：

<div class="hidden" id="deleteModal">
    <h2>Sei sicuro di volerlo eliminare?</h2>
    <button type="button" class="btn btn-danger" id="yesBtn">Sì</button>
    <button type="button" class="btn btn-info" id="noBtn">No</button>
</div>

小提示：记得在点击列表里的删除按钮、唤起模态框的时候，把对应漫画的ID存在全局变量或者模态框DOM的自定义data属性上，避免执行confirmClick的时候找不到idComic的值。

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