如何通过AJAX将正确ID传递给Laravel控制器解决模态框删除ID错误

问题原因 #

你的问题出在两处路由硬编码：

1. 模态框的删除表单action是Blade渲染阶段生成的，用的是@foreach遍历结束后最后一个图片的ID（也就是你遇到的120），不会随点击的图片动态更新
2. JS里showImage函数的路由也是服务器渲染阶段固定生成的，用的同样是最后一张图片的ID，不是你当前选中图片的对应路由

修复步骤 #

1. 修改模态框表单

给删除表单加唯一ID，移除写死的action属性：

<!-- 原form标签 -->
<form action="{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}" method="post">
<!-- 替换为 -->
<form action="" method="post" id="deleteForm">

2. 修改缩略图点击事件，传递对应图片的删除路由

遍历缩略图时，把当前图片的删除路由一起传给showImage函数：

<!-- 原img标签 -->
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}')">
<!-- 替换为 -->
<img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">

3. 修改JS逻辑，动态绑定路由

把原有JS替换为以下内容：

function showImage(url, deleteRoute) {
    let image = `<img src="${url}" onclick="deleteImage('${deleteRoute}')" class="img-fluid cursor-pointer" />`;
    $('#showImage').html(image);
}

function deleteImage(deleteUrl) {
    // 先更新表单的action为当前选中图片的删除路由
    $('#deleteForm').attr('action', deleteUrl);
    // 再弹出模态框
    $('#delete').modal('show');
}

修改完成后点击任意图片，模态框的删除路由都会同步更新为对应图片的地址，提交时就会把正确的ID传给控制器。

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