Laravel使用Ajax提交数据至控制器却获空请求的问题排查

问题根源 #

你当前的Ajax配置里错误设置了processData: false和contentType: false——这两个参数仅在上传文件时需要启用，目的是让jQuery不自动处理请求数据格式。但你只是提交普通文本数据，这两个设置会导致请求体格式不符合Laravel的解析规则，最终控制器无法获取到提交的值。

修复方案 #

直接移除processData、contentType和enctype这三个不必要的配置项，修改后的Ajax代码如下：

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(document).on('click', '.add_per', function (e) {
        e.preventDefault();
        var name = $('#name').val();
        console.log(name);
        
        $.ajax({
            type: 'post',
            url: "{{route('admin.permissions.store')}}",
            data: {
                name: name
            },
            cache: false,
            success: function (data) {
                if (data.status === true) {
                    $('#success_msg').show();
                    // 移到这里关闭模态框，避免提前关闭中断请求
                    $('#your-modal-id').modal('hide');
                }
            },
            error: function (reject) {
                alert("Error occurred !");
            }
        });
    });
</script>

额外优化建议 #

• 原按钮上的data-bs-dismiss="modal"会在点击后立刻关闭模态框，可能导致Ajax请求未完成就被中断，建议将模态框关闭逻辑移到success回调中（记得替换#your-modal-id为实际的模态框ID）。
• 如果后续需要上传文件，再使用FormData并开启processData: false和contentType: false，示例如下：

  var formData = new FormData();
  formData.append('name', $('#name').val());
  // 追加文件：formData.append('file', $('#file')[0].files[0]);
  
  $.ajax({
      type: 'post',
      url: "{{route('admin.permissions.store')}}",
      data: formData,
      processData: false,
      contentType: false,
      cache: false,
      // ... 其他回调逻辑
  });
  

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