Penghantaran Borang melalui AJAX menggunakan FormData JavaScript

Dengan menggunakan FormData, anda boleh menghantar semua medan borang secara automatik ke pelayan. Mari kita lihat bagaimana ia dilakukan.

Katakan kita mempunyai borang berikut, di mana input diberikan atribut name:

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

Mari hantar borang ini melalui AJAX. Untuk permulaan, dapatkan pautan ke borang ke dalam pembolehubah:

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

Sekarang dalam badan permintaan sebagai data tetapkan objek FormData. Dan kepada objek itu sendiri, hantarkan pautan ke borang sebagai parameter:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // hantar pautan ke borang
	});
	
	event.preventDefault();
});

Hasilnya, di pelayan kita boleh mendapatkan nilai input mengikut nama mereka dari atribut name:

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

Diberi borang dengan lima input, di mana nombor dimasukkan. Hantar borang ini ke pelayan menggunakan kaedah POST. Biarkan pelayan mencari min aritmetik bagi nombor yang dimasukkan dan hantar hasilnya kembali ke pelayar.