Menghantar Permintaan POST melalui AJAX dalam JavaScript

Sekarang mari kita hantar permintaan POST ke pelayan. Untuk ini, fungsi fetch mempunyai parameter kedua dengan tetapan. Dalam tetapan method kaedah permintaan HTTP dinyatakan. Mari kita nyatakan kaedah POST:

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

Mari kita juga tetapkan data yang kita ingin hantar ke pelayan. Dalam permintaan POST, data dihantar dalam badan permintaan HTTP. Untuk ini data perlu dinyatakan dalam tetapan body. Mari kita nyatakan dalam bentuk Query String, dengan menetapkan jenis mereka MIME yang sesuai:

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

Mari kita dapatkan data ini di pelayan, lakukan sesuatu dengannya dan hantar mereka kembali:

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

Di pihak klien, terdapat satu div dan satu butang. Apabila butang ditekan, hantar tiga nombor ke pelayan menggunakan kaedah POST. Biarkan pelayan mencari jumlah nombor yang dihantar. Tulis hasilnya ke dalam div.