Laravel 8 实现动态关联输入：选择NIS自动填充学生姓名

1. 路由配置 #

确保路由在routes/web.php中正确注册，建议使用命名路由避免硬编码URL：

Route::get('/students/find-by-nis', [StudentController::class, 'findByNis'])->name('students.find-by-nis');

2. 控制器方法实现 #

在StudentController中编写查询逻辑，返回标准JSON格式响应：

public function findByNis(Request $request)
{
    // 验证输入的NIS合法性
    $request->validate([
        'nis' => 'required|string',
    ]);

    // 根据NIS查询对应学生
    $student = Student::where('nis', $request->nis)->first();

    // 返回查询结果
    if ($student) {
        return response()->json([
            'success' => true,
            'name' => $student->name,
        ]);
    }

    return response()->json([
        'success' => false,
        'name' => '',
    ]);
}

3. 表单视图代码 #

确保表单包含NIS输入框和姓名输入框（姓名框可设为只读）：

<div class="form-group">
    <label for="nis">NIS（学号）</label>
    <input type="text" id="nis" name="nis" class="form-control">
</div>

<div class="form-group">
    <label for="name">学生姓名</label>
    <input type="text" id="name" name="name" class="form-control" readonly>
</div>

4. Ajax请求代码（jQuery示例） #

监听NIS输入框的变化，发送请求并处理响应：

$(document).ready(function() {
    // 监听NIS输入框的失焦事件（或input事件实时触发）
    $('#nis').on('blur', function() {
        let nis = $(this).val().trim();
        if (!nis) {
            $('#name').val('');
            return;
        }

        $.ajax({
            url: "{{ route('students.find-by-nis') }}",
            type: 'GET',
            data: { nis: nis },
            success: function(res) {
                res.success ? $('#name').val(res.name) : $('#name').val('');
            },
            error: function(xhr) {
                console.log(xhr.responseText); // 打印错误信息用于排查
                $('#name').val('');
            }
        });
    });
});

常见问题排查 #

• 路由匹配问题：执行php artisan route:list查看路由列表，确认路由URL、请求方法与Ajax配置一致。
• CSRF令牌验证：若使用POST请求，需在页面头部添加CSRF元标签，并在Ajax请求中携带令牌：

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

  headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  

• 数据库字段错误：确认Student模型对应的数据库表中，学号字段为nis、姓名字段为name，无拼写错误。
• 响应格式错误：检查控制器是否返回response()->json()，而非视图或字符串。
• 控制台调试：打开浏览器开发者工具（F12），查看Network标签下的请求详情，确认请求参数、响应内容是否符合预期。

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