Formas nosūtīšana caur AJAX izmantojot FormData JavaScript

Ar FormData palīdzību var automātiski nosūtīt visus formas laukus uz serveri. Apskatīsim, kā tas tiek darīts.

Pieņemsim, ka mums ir šāda forma, kuras ievades laukiem ir doti atribūti name:

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

Nosūtīsim šo formu caur AJAX. Vispirms iegūstam saiti uz formu mainīgajā:

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

Tagad pieprasījuma pamatnā kā datus norādām objektu FormData. Un pašam objektam kā parametru padodam saiti uz formu:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // padodam saiti uz formu
	});
	
	event.preventDefault();
});

Rezultātā serverī mēs varēsim iegūt ievades lauku vērtības pēc to nosaukumiem no atribūtiem name:

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

Dota forma ar pieciem ievades laukiem, kuros tiek ievadīti skaitļi. Nosūtiet šo formu uz serveri ar POST metodi. Ļaujiet serverim atrast ievadīto skaitļu vidējo aritmētisko un nosūtīt rezultātu atpakaļ pārlūkprogrammā.