在 Laravel 中使用 ajax FormData() 時無法獲取輸入字段的值

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>

控制器片段：

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 。 這是一種可怕的做法，已被棄用