Upeleaji Fomu Kupitia AJAX Kwa Kutumia FormData JavaScript

Kwa kutumia FormData inakuwezesha kupeleta automatikia fields zote za fomu kwenye seva. Hebu tuangalie jinsi hii inafanyika.

Hebu tuchukulie tuna fomu ifuatayo, ambayo input zimepewa attributes name:

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

Hebu tupeleke fomu hii kupitia AJAX. Kwa kuanza, tupate kiungo kwa fomu kwenye variable:

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

Sasa kwenye mwili wa ombi kama data tutaonyesha object FormData. Na kwa object yenyewe parameter tutapeleka kiungo kwa fomu:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // tunapeleka kiungo kwa fomu
	});
	
	event.preventDefault();
});

Kama matokeo kwenye seva tutaweza kupata values za input kwa majina yao kutoka kwenye attributes name:

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

Imetolewa fomu yenye input tano, ambazo nambari huingizwa. Peleka fomu hii kwenye seva kwa kutumia method POST. Hebu seva ipate kiwango cha wastani cha nambari zilizoingizwa na ipeleke matokeo nyuma kwenye browser.