Stuur vorm via AJAX met FormData JavaScript

Met FormData kan alle vormvelde outomaties gestuur word na die bediener. Kom ons kyk hoe dit gedoen word.

Laat ons die volgende vorm hê, waaraan die insette die eienskappe name gegee is:

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

Laat ons hierdie vorm via AJAX stuur. Vir die begin, kry 'n verwysing na die vorm in 'n veranderlike:

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

Tans, in die liggaam van die versoek as data specifiseer ons die objek FormData. En aan die objek self gee ons die verwysing na die vorm as parameter:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // gee die verwysing na die vorm
	});
	
	event.preventDefault();
});

As gevolg daarvan op die bediener sal ons die waardes van die insette volgens hul name uit die eienskappe name kan kry:

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

Daar is 'n vorm met vyf insette, waarin getalle ingevoer word. Stuur hierdie vorm na die bediener met die POST metode. Laat die bediener die rekenkundige gemiddeld van die ingevoerde getalle vind en stuur die resultaat terug na die blaaier.