Gửi biểu mẫu qua AJAX sử dụng FormData JavaScript

Bằng cách sử dụng FormData, bạn có thể tự động gửi tất cả các trường của biểu mẫu lên máy chủ. Hãy cùng xem cách thực hiện điều này.

Giả sử chúng ta có biểu mẫu sau, trong đó các trường input được cung cấp thuộc tính name:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

Hãy gửi biểu mẫu này qua AJAX. Đầu tiên, lấy tham chiếu đến biểu mẫu vào một biến:

let form = document.querySelector('form');

Bây giờ, trong phần thân của yêu cầu (request body), hãy chỉ định đối tượng FormData làm dữ liệu. Và chuyển tham chiếu đến biểu mẫu làm tham số cho chính đối tượng đó:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // truyền tham chiếu đến biểu mẫu
	});
	
	event.preventDefault();
});

Kết quả là trên máy chủ, chúng ta có thể lấy giá trị của các trường input theo tên của chúng từ thuộc tính name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form data received';
	}
}

Cho một biểu mẫu có năm trường input, trong đó người dùng nhập các con số. Hãy gửi biểu mẫu này lên máy chủ bằng phương thức POST. Giả sử máy chủ tìm giá trị trung bình cộng của các số đã nhập và gửi kết quả trở lại trình duyệt.