FormData ile AJAX Kullanarak Form Gönderme JavaScript

FormData kullanarak bir formdaki tüm alanları otomatik olarak sunucuya gönderebilirsiniz. Bunun nasıl yapıldığına bir göz atalım.

Aşağıdaki gibi, input elemanlarına name nitelikleri verilmiş bir formumuz olduğunu varsayalım:

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

Bu formu AJAX ile gönderelim. İlk olarak formun referansını bir değişkende alalım:

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

Şimdi, istek gövdesinde veri olarak FormData nesnesini belirteceğiz. Ve bu nesneye parametre olarak formun referansını ileteceğiz:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // formun referansını iletiyoruz
	});
	
	event.preventDefault();
});

Sonuç olarak, sunucuda input değerlerini name niteliklerindeki isimlerine göre alabileceğiz:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form verisi alındı';
	}
}

İçine sayılar girilen beş inputlu bir form verildi. Bu formu POST metoduyla sunucuya gönderin. Sunucunun girilen sayıların aritmetik ortalamasını bulmasını ve sonucu tarayıcıya geri göndermesini sağlayın.