การส่งฟอร์มผ่าน AJAX โดยใช้ FormData JavaScript

การใช้ FormData ช่วยให้เราส่งฟิลด์ทั้งหมดของฟอร์มไปยังเซิร์ฟเวอร์ได้โดยอัตโนมัติ มาดูวิธีการทำกัน

สมมติว่าเรามีฟอร์มต่อไปนี้ ซึ่งอินพุตต่างๆ ได้รับแอตทริบิวต์ name:

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

มาเริ่มส่งฟอร์มนี้ผ่าน AJAX กัน ก่อนอื่นให้ดึงลิงก์ไปยังฟอร์มไว้ในตัวแปร:

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

ตอนนี้ในเนื้อความขอคำขอ ให้ระบุออบเจ็กต์ FormData เป็นข้อมูล และส่งพารามิเตอร์ให้กับออบเจ็กต์นั้นเอง โดยอ้างอิงถึงฟอร์ม:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // ส่งลิงก์ไปยังฟอร์ม
	});
	
	event.preventDefault();
});

ผลลัพธ์ที่ได้บนเซิร์ฟเวอร์ เราจะสามารถ รับค่าของอินพุตต่างๆ ตามชื่อของพวกมัน จากแอตทริบิวต์ name:

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

ให้ฟอร์มที่มีอินพุตห้าตัว ซึ่ง ป้อนตัวเลขเข้าไป ส่งฟอร์มนี้ไปยัง เซิร์ฟเวอร์ด้วยวิธี POST ให้เซิร์ฟเวอร์หาค่า ค่าเฉลี่ยเลขคณิตของตัวเลขที่ป้อนเข้าไป และส่งผลลัพธ์กลับไปยังเบราว์เซอร์