Laravel 8实现下拉选择选项时无刷新动态填充弹窗表格

现有弹窗效果：

预期实现效果：
#

实现步骤 #

1. 修改前端基础代码 #

首先在页面<head>标签内添加CSRF令牌meta，避免AJAX请求报419权限错误：

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

修改现有弹窗代码：给老师下拉框加唯一ID，在下拉框下方新增表格容器用来动态渲染学生数据，同时调大弹窗宽度适配表格：

<div id="UpgradeStudentModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel">Upgrade Student</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}

                    <div class="mb-3">
                        <label for="" class="form-label">Teacher</label>
                        <select class="form-control" name="teacherId" id="teacherSelect">
                            <option value="">请选择老师</option>
                            @foreach($teachers as $teacher)
                                <option value="{{$teacher->tId}}">{{$teacher->tName}}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- 动态表格渲染容器 -->
                    <div id="studentTableContainer">
                        <p class="text-muted text-center py-3">请选择老师查看对应学生</p>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Save
                        </button>
                        <button type="button" class="btn btn-outline-danger waves-effect waves-light"
                                data-bs-dismiss="modal">Close
                        </button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

2. 添加后端路由 #

在routes/web.php文件中新增POST路由，用来处理根据老师ID查询学生的请求：

use App\Http\Controllers\StudentController; // 替换为项目实际的控制器命名空间

Route::post('/get-students-by-teacher', [StudentController::class, 'getStudentsByTeacher'])->name('get.students.by.teacher');

3. 编写后端查询逻辑 #

在对应控制器中新增方法，接收前端传的老师ID，校验参数后查询关联学生，返回JSON格式数据：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Teacher; // 替换为项目实际的Teacher模型路径
// use App\Models\Student; // 不使用模型关联时引入Student模型

class StudentController extends Controller
{
    public function getStudentsByTeacher(Request $request)
    {
        // 参数校验
        $validated = $request->validate([
            'teacherId' => 'required|integer|exists:teachers,tId'
        ]);

        // 方式1：Teacher模型已定义students关联时使用，代码更简洁
        $students = Teacher::findOrFail($validated['teacherId'])->students;
        
        // 方式2：未定义关联时直接查表，替换为项目实际的学生表外键字段
        // $students = Student::where('tId', $validated['teacherId'])->get();

        return response()->json([
            'code' => 0,
            'data' => $students
        ]);
    }
}

如果使用模型关联，需要在Teacher模型中添加对应关联定义：

public function students()
{
    return $this->hasMany(Student::class, 'tId', 'tId');
}

4. 编写前端AJAX交互逻辑 #

在页面底部（引入jQuery之后）添加JS代码，监听下拉框选中事件，发送异步请求并动态渲染表格：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 全局配置AJAX请求自动携带CSRF令牌
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // 监听老师下拉框选中事件
    $('#teacherSelect').on('change', function() {
        const teacherId = $(this).val();
        const container = $('#studentTableContainer');

        if (!teacherId) {
            container.html('<p class="text-muted text-center py-3">请选择老师查看对应学生</p>');
            return;
        }

        // 显示加载状态
        container.html('<p class="text-center py-3">数据加载中...</p>');

        // 发送异步请求
        $.post('{{ route("get.students.by.teacher") }}', {
            teacherId: teacherId
        }, function(res) {
            if (res.code !== 0) {
                container.html('<p class="text-danger text-center py-3">数据加载失败，请重试</p>');
                return;
            }

            const students = res.data;
            if (students.length === 0) {
                container.html('<p class="text-muted text-center py-3">该老师暂无关联学生</p>');
                return;
            }

            // 拼接表格HTML，字段替换为项目实际的学生表字段
            let tableHtml = `
            <div class="table-responsive mt-3">
                <table class="table table-bordered table-striped mb-0">
                    <thead>
                        <tr>
                            <th width="50">选择</th>
                            <th>学生ID</th>
                            <th>学生姓名</th>
                            <th>年级</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            students.forEach(student => {
                tableHtml += `
                <tr>
                    <td><input type="checkbox" class="form-check-input" name="studentIds[]" value="${student.sId}"></td>
                    <td>${student.sId}</td>
                    <td>${student.sName}</td>
                    <td>${student.grade ?? '-'}</td>
                </tr>
                `;
            });

            tableHtml += `
                    </tbody>
                </table>
            </div>
            `;

            container.html(tableHtml);
        }).fail(function() {
            container.html('<p class="text-danger text-center py-3">网络请求错误，请重试</p>');
        });
    });

    // 弹窗关闭时重置状态，避免下次打开残留旧数据
    $('#UpgradeStudentModal').on('hidden.bs.modal', function() {
        $('#teacherSelect').val('');
        $('#studentTableContainer').html('<p class="text-muted text-center py-3">请选择老师查看对应学生</p>');
        $('#UpgradeStudentModal form')[0].reset();
    });
});
</script>

注意事项 #

• 代码中涉及的模型名、表字段、关联关系请替换为项目实际配置，比如学生姓名、ID字段名，老师和学生的关联外键等。
• 上述JS代码基于jQuery编写，请确认项目中已经提前引入jQuery；如果不用jQuery，替换为原生fetch写法逻辑一致。
• 弹窗添加的modal-lg类是为了适配表格宽度，可根据自身UI需求调整弹窗大小。

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