如何使用XMLHttpRequest发送JSON数据到Laravel并存入数据库

问题排查与修复步骤 #

1. 调试无输出问题 #

你发起的是异步XMLHttpRequest请求，页面没有刷新，dump/dd/var_dump的输出不会直接显示在当前浏览的页面上，按以下步骤查看调试输出：

• 打开浏览器F12开发者工具，切换到「网络/Network」面板
• 提交问卷触发请求后，找到请求路径为/api/survey的POST请求
• 点击该请求，切换到「响应/Response」标签即可看到调试函数的输出内容

2. Auth::user()不生效、数据无法传到控制器的核心原因 #

你使用了web.php定义路由，默认携带VerifyCsrfToken中间件校验，你的AJAX请求未携带CSRF令牌，请求直接被中间件拦截，没有进入控制器执行逻辑，修复方式：

• 先确认Blade模板的<head>标签内存在CSRF的meta声明：

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

• 修改你的JS请求代码，补充CSRF请求头：

var survey = new Survey.Model(this.surveyJSON, surveyContainer);
survey.onComplete.add(function (sender, options) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/survey");
    xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    // 新增CSRF头
    xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
    xhr.send(JSON.stringify(sender.data));
    console.log(JSON.stringify(sender.data));
});

如果后续你把路由迁移到api.php，需要额外给路由加web中间件，因为api.php默认无会话中间件，无法读取登录态。 #

3. 存储逻辑错误修复 #

你的控制器存储代码存在两处语法错误：

• author_id为用户ID字段，不要传入整个用户对象，取主键ID即可
• response()->json()是用于返回响应的方法，存储JSON直接用json_encode或者借助模型的$casts自动转换
  正确写法参考：
  首先在Survey模型中添加casts配置，方便后续读取自动转数组：

// app/Models/Survey.php
protected $casts = [
    'answers' => 'array',
];

控制器存储代码修改为：

public function retrieval(\Illuminate\Http\Request $request)
{
    // 可自行补充参数校验逻辑
    Survey::create([
        'answers' => $request->all(),
        'author_id' => Auth::id()
    ]);
    // 给前端返回响应确认提交成功
    return response()->json(['status' => 'success']);
}

内容的提问来源于stack exchange，提问作者Murphy's_Law_Personified