การส่งคำขอ POST ผ่าน AJAX ใน JavaScript

ตอนนี้เรามาส่งคำขอ POST ไปยังเซิร์ฟเวอร์กัน สำหรับสิ่งนี้ ฟังก์ชัน fetch มีพารามิเตอร์ที่สอง สำหรับการตั้งค่า ในการตั้งค่า method จะระบุเมธอดของคำขอ HTTP มากำหนดเมธอด POST:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

นอกจากนี้ มากำหนดข้อมูลที่ เราต้องการส่งไปยังเซิร์ฟเวอร์ ในคำขอ POST ข้อมูลจะถูกส่ง ในเนื้อความ (body) ของคำขอ HTTP สำหรับสิ่งนี้ จำเป็นต้องระบุข้อมูลในการตั้งค่า body มากำหนดข้อมูลในรูปแบบ Query String และกำหนดประเภทของข้อมูลด้วย MIME ที่เกี่ยวข้อง:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

มารับข้อมูลนี้บนเซิร์ฟเวอร์ ทำบางอย่างกับข้อมูล และส่ง กลับไป:

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

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