$(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 片段:
public function store(Request $request){
return response()->json($request->all());
}
当我尝试使用 jQuery AJAX FormData()
方法获取整个表单数据时,我得到一个空数组。
需要使用此 FormData()
因为在不久的将来我必须使用表单数据上传图像。
最佳答案
发送整个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)
}
});
Never use
async:false
. it is a terrible practice and is deprecated
关于javascript - 在 Laravel 中使用 ajax FormData() 时无法获取输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47368992/