Laravel中keyup事件触发Ajax请求时控制器Request参数为空

核心问题场景 #

前端已携带输入框值发起Ajax请求，但Laravel控制器中通过$request->input()无法获取到传递的参数值。

常见根因及对应修复方案 #

• 请求头与传参格式错配
  若前端发送JSON格式请求体，必须配置请求头Content-Type: application/json，Laravel才会自动解析请求体填充到Request参数池；若为表单序列化/FormData传参，需对应匹配application/x-www-form-urlencoded或multipart/form-data请求头，错配会导致请求体无法被框架解析。
• 参数传递位置错误
  GET请求的参数需拼接在URL查询串中，使用axios类请求库时要放到params配置项；POST/PUT等请求的参数要放到请求体data配置项，位置错误会导致参数根本不会被发送到后端可解析的位置。
• 参数字段名不匹配
  检查前端传递的参数名是否严格为searchUser，注意大小写、下划线拼写差异，比如误写为search_user、searchuser都会导致无法匹配取值。
• CSRF校验拦截
  Laravel默认Web路由开启CSRF校验，若请求未携带正确的X-CSRF-TOKEN请求头，会被中间件拦截，导致参数无法正常进入控制器逻辑。
• 调试代码风险
  生产环境禁止直接将完整$request对象返回到前端响应，会泄露服务端敏感信息，调试完成后要移除相关调试字段。

后端代码优化参考 #

public function searchUser(Request $request): JsonResponse
{
    // 增加参数校验，拦截空参数同时避免全表扫描
    $validated = $request->validate([
        'searchUser' => 'required|string|max:255',
    ]);
    $string = $validated['searchUser'];

    $user = DB::table('users')->where('name', 'LIKE', "%{$string}%")
        ->orWhere('surname', 'LIKE', "%{$string}%")
        ->orWhere('phone_number', 'LIKE', "%{$string}%")
        ->orWhere('email', 'LIKE', "%{$string}%")
        ->get();

    return response()->json([
        'user' => $user,
        'keyword' => $string,
    ]);
}

快速排查技巧：调试阶段可在控制器入口直接打印$request->all()，若返回空数组即可判定为前端传参格式/请求头/参数位置问题，与后端业务逻辑无关；若打印结果中存在searchUser字段，再检查input()方法内填写的字段名是否拼写正确。

前端正确传参考例 #

Axios 写法 #

const keyword = document.querySelector('input[name="searchUser"]').value.trim();
axios.post('/search-user', {
    searchUser: keyword
}, {
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
    }
}).then(res => {
    console.log('查询结果', res.data);
})

jQuery Ajax 写法 #

const keyword = $('input[name="searchUser"]').val().trim();
$.ajax({
    url: '/search-user',
    method: 'POST',
    data: {searchUser: keyword},
    dataType: 'json',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(res) {
        console.log('查询结果', res);
    }
})

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