Laravel 9中AJAX PUT请求更新数据时后端无法接收请求问题

问题说明 #

学习Laravel 9时，尝试通过AJAX以PUT请求提交表单数据到update方法（路由已配置），但后端update方法无法接收到请求数据。

相关代码 #

表单代码 #

<form id="formEdit" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <div class="card-body">
       <div class="form-group">
          <label for="name">Name</label>
          <input value="{{$role->name ?? ''}}" type="text" class="form-control" id="name" name="name" placeholder="Enter name">
     </div>
    </div>
  <!-- /.card-body -->

   <div class="card-footer">
     <button type="submit" class="float-right btn btn-primary">Lưu lại</button>
   </div>
</form>

AJAX代码 #

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

function sendAjax(url, formData, type, method = 'post'){
var result =  $.ajax({
url: url,
method: method,
typeData: 'json',
data: formData,
processData: false,
contentType: false,
async: false
});
return resultAjax(result, type);
}

<script>
$('#formEdit').submit(function(event){
  event.preventDefault();
  var eleValidate = ['name'];
  var data = new FormData($('#formEdit')[0]);
  var url = "{{route('role.update', $role->id)}}";
  var result = sendAjax(url, data, 'edit', 'put');
  if(result){
    renderError(result, eleValidate);
  }else{
    removeError(eleValidate, 'formEdit');
 }
 });        
</script>

路由与控制器代码 #

Route::put('/role/update/{id}', 'update')->name('role.update');

public function update(Request $request, $id)
{
    if($request->ajax()){
        $role = RoleModel::find($id);
        dd($request);
    }
}

请求与后端反馈 #

• 请求负载包含_token、_method:PUT、name字段
• 后端执行dd($request)后，未获取到提交的表单数据

问题排查 #

1. AJAX参数拼写错误：typeData应为dataType，参数名错误导致无法正确解析响应格式。
2. PUT请求模拟问题：浏览器原生不支持PUT/PATCH方法，Laravel依赖POST请求携带_method参数模拟PUT请求。直接用AJAX发送PUT请求时，部分环境下服务器无法正确解析。
3. 同步请求风险：async: false会阻塞浏览器，可能导致请求处理异常，且不符合现代前端异步规范。
4. AJAX判断逻辑问题：$request->ajax()依赖请求头的X-Requested-With，FormData请求的Content-Type为multipart/form-data，可能无法触发该判断。

解决方案 #

1. 修正AJAX参数与请求方式 #

将AJAX函数改为POST请求，手动添加_method=PUT参数，同时修正dataType拼写：

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

// 改用Promise处理异步请求
function sendAjax(url, formData, type){
 return $.ajax({
 url: url,
 method: 'post',
 data: formData,
 processData: false,
 contentType: false,
 dataType: 'json' // 修正参数名
 });
}

2. 表单提交时添加_method参数 #

在FormData中手动追加_method字段，模拟PUT请求：

$('#formEdit').submit(function(event){
 event.preventDefault();
 var eleValidate = ['name'];
 var data = new FormData($('#formEdit')[0]);
 data.append('_method', 'PUT'); // 追加PUT方法标记
 var url = "{{route('role.update', $role->id)}}";
 
 sendAjax(url, data, 'edit')
 .done(function() {
 removeError(eleValidate, 'formEdit');
 // 处理成功逻辑，如提示更新成功
 })
 .fail(function(error) {
 renderError(error.responseJSON, eleValidate);
 });
});

3. 调整控制器判断逻辑 #

移除$request->ajax()判断，或改用$request->wantsJson()兼容更多请求场景：

public function update(Request $request, $id)
{
    // 先直接打印请求数据，确认是否接收成功
    dd($request->all());
    
    // 后续业务逻辑
    // $role = RoleModel::find($id);
    // $role->update($request->validate([...]));
}

4. 确认路由配置正确性 #

Laravel 9中路由需指定完整控制器类路径：

use App\Http\Controllers\RoleController;

Route::put('/role/update/{id}', [RoleController::class, 'update'])->name('role.update');

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