Mengirim Form melalui AJAX menggunakan FormData JavaScript

Dengan menggunakan FormData, kita dapat secara otomatis mengirim semua field form ke server. Mari kita lihat bagaimana cara melakukannya.

Misalkan kita memiliki form berikut, di mana input diberikan atribut name:

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

Mari kita kirim form ini melalui AJAX. Untuk awalnya, dapatkan referensi ke form dalam variabel:

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

Sekarang dalam body permintaan, sebagai data tentukan objek FormData. Dan kepada objek itu sendiri, berikan parameter berupa referensi ke form:

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

Hasilnya, di server kita dapat mendapatkan nilai input berdasarkan namanya dari atribut name:

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

Diberikan form dengan lima input, di mana angka dimasukkan ke dalamnya. Kirim form ini ke server dengan metode POST. Biarkan server menemukan rata-rata aritmatika dari angka yang dimasukkan dan mengirimkan hasilnya kembali ke browser.