Laravel中如何通过Bootstrap Modal传递ID至URL并在控制器查询

1. 添加路由 #

在routes/web.php中新增接口路由，用于根据用户ID获取关联的平台数据：

Route::get('/users/{user}/platforms', [UserController::class, 'getUserPlatforms'])->name('users.platforms');

2. 调整控制器逻辑 #

修改UserController，移除硬编码查询，新增动态获取用户平台的方法：

class UserController extends Controller
{
    public function index(Request $request) {
        // 只查询所有用户，平台数据改为动态获取
        $users = User::all();
        return view('admin.user.index', ['users' => $users]);
    }

    // 利用路由模型绑定自动获取用户实例
    public function getUserPlatforms(User $user) {
        $user->load('platforms');
        return response()->json(['platforms' => $user->platforms]);
    }
}

3. 更新Blade模板与JS逻辑 #

修改模态框的select部分，通过AJAX动态渲染用户对应的平台选项：

<table>
    <tr>
        <td>Name</td>
        <td>View</td>
    </tr>
    @foreach($users as $user)
    <tr>
        <td>{{$user->name}}</td>
        <td> 
           <button data-bs-toggle="modal" data-bs-id="{{$user->id}}" data-bs-target="#viewModal">查看平台</button>
        </td>
    </tr>
    @endforeach
</table>

<div class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-body">
                <form action="" method="post">
                    @csrf
                    <div class="mb-3">
                        <input readonly type="text" name="id_name" id="id">
                      
                        <select name="platform" id="platform" class="form-control">
                            <!-- 动态选项将插入此处 -->
                        </select>
                    </div>
                
                    <button type="submit" class="fw-bold btn bg-primary text-white">Add new</button>
                </form>
            </div>
        </div>
    </div>  
</div>

<script>
var viewModal = document.getElementById('viewModal')
viewModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget
    var userId = button.getAttribute('data-bs-id')

    // 设置模态框内的用户ID
    var modalBodyID = viewModal.querySelector('.modal-body #id')
    modalBodyID.value = userId

    // 获取平台选择框并清空旧选项
    var platformSelect = viewModal.querySelector('.modal-body #platform')
    platformSelect.innerHTML = ''

    // 异步请求用户平台数据
    fetch(`/users/${userId}/platforms`)
        .then(response => response.json())
        .then(data => {
            // 生成平台选项并插入select
            data.platforms.forEach(platform => {
                let option = document.createElement('option')
                option.value = platform.id
                option.textContent = platform.title
                platformSelect.appendChild(option)
            })
        })
        .catch(err => console.error('加载平台数据失败:', err))
});
</script>

核心要点 #

• 用路由模型绑定简化用户查询，避免手动拼接ID条件
• 模态框触发时通过fetch异步拉取对应用户的平台数据，实现动态渲染
• 每次打开模态框清空旧选项，确保数据与当前用户匹配

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