如何在Laravel项目中将选中的图片ID通过AJAX传递至Controller

问题根源 #

• 页面渲染阶段模态框内的表单action属性已经被后端固定为循环遍历最后一张图片的删除路由（也就是你看到的ID120对应的路由），不会动态跟随选中的图片变化
• 原有deleteImage函数仅触发模态框显示，没有将选中图片对应的删除路由更新到表单的action属性上
• showImage函数内写死了后端渲染的删除路由，没有使用当前选中图片对应的路由

修改步骤 #

1. 给模态框内的表单加ID，清空默认action #

将模态框内的表单代码修改为：

<form action="" method="post" id="deleteGalleryForm">
    @csrf
    <!-- 其余模态框内容保持不变 -->

2. 修改小图点击事件，传入对应删除路由 #

修改遍历小图的onclick参数，把当前图片的删除路由传递给showImage函数：

@foreach($galleries as $gallery)
<div class="col-md-2">
    <img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" 
        onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">
    <br>
    <div class="text-center text-danger">{{ $gallery->id }}</div>
</div>
@endforeach

3. 修改JS函数，动态更新表单action #

调整showImage和deleteImage函数逻辑：

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

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

修改完成后，点击不同图片弹出的模态框会自动携带对应图片的删除路由，提交表单时就会把正确的ID传递给后端Controller。

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