Question

$(document).on('submit', '#color_changer_form', function(e) {
  e.preventDefault();
  var colorCode = $('#color_code').val();
  var formData = new FormData(this)[0];
  $.ajax({
    headers: {
      'X-CSRF-Token': "{{csrf_token()}}"
    },
    type: "POST",
    url: "{{route('color.store')}}",
    data: formData,
    async: false,
    success: function(data) {
      console.log(data)
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

<form action="" method="POST" id="color_changer_form">
  <input type="text" id="color_code" name="color_code">
  <button type="submit" id="color_submit" class="btn btn-success">Save Change</button>
</form>

Controller snippet：

public function store(Request $request){
    return response()->json($request->all());
}

当我尝试使用jQuery AJAX FormData()方法获取整个表单数据时，我得到一个空数组。

需要使用此FormData()因为在不久的将来我必须使用表单数据上传图片。

Answer 1

发送整个formData对象

变化：

 var formData = new FormData(this)[0];

要

 var formData = new FormData(this);

如果没有涉及文件，使用serialize()也很简单

$.ajax({
  headers: {
    'X-CSRF-Token': "{{csrf_token()}}"
  },
  type: "POST",
  url: "{{route('color.store')}}",
  data: $(this).serialize(),
  success: function(data) {
    console.log(data)
  }

});

从不使用async:false。这是一种可怕的做法，已被弃用

在Laravel中使用ajax FormData（）时无法获取输入字段的值

1 个答案: