Laravel 8中Ajax请求成功但数据未传到控制器、数据库未更新求助

1. Ajax请求头设置错误 #

你使用FormData对象携带参数时，手动指定了Content-type: application/x-www-form-urlencoded，这是错误的。FormData对应的内容类型是multipart/form-data，且必须让浏览器自动生成请求头（会自动携带分隔用的boundary参数），你手动设置之后后端无法正确解析参数，所以拿不到提交的数据。
修复方案：直接删掉这一行即可：

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

2. 前端请求状态判断逻辑错误 #

你判断请求成功的代码里用的status变量是全局的window.status，不是当前请求的request.status，所以哪怕请求返回422验证失败、500服务错误，你也会误判为请求成功。
修复方案：修改判断条件：

if (request.status === 0 || (request.status >= 200 && request.status < 400))

同时建议你打印request.responseText查看后端返回的实际内容，能快速定位问题。

3. 控制器返回逻辑不匹配Ajax场景 #

你控制器最后返回的是redirect('/profilo')和back()->with()，这两个对普通表单提交有效，对Ajax请求来说只会返回302重定向响应，不会触发页面跳转，也没法拿到session里的错误提示。就算更新成功，你当前页面也不会刷新，自然看不到变化。
修复方案：
如果需要页面刷新才能看到最新数据，请求成功后主动调用js跳转：

if (request.readyState === XMLHttpRequest.DONE) {
    if (request.status >=200 && request.status <400) {
        window.location.href = '/profilo'
    } else {
        console.log('更新失败', request.responseText)
    }
}

如果要实现无刷新更新，就把控制器的返回改成json格式：

// 成功时
return response()->json(['code'=>0, 'msg'=>'更新成功']);
// 失败时
return response()->json(['code'=>1, 'msg'=>'更新失败']);

前端拿到响应后更新页面的对应字段即可。

4. 确认提交的是修改后的数据 #

你当前提交的data是页面初始化时从后端拿到的原始用户数据，要确认getDataProfilePage函数已经把用户修改后的新值更新到了data对象里，否则你提交的还是旧数据，数据库自然不会有变化。

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