Envio de formulário via AJAX usando FormData JavaScript

Usando FormData você pode enviar automaticamente todos os campos de um formulário para o servidor. Vamos ver como isso é feito.

Suponha que temos o seguinte formulário, no qual os inputs receberam os atributos name:

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

Vamos enviar este formulário via AJAX. Para isso, primeiro vamos obter a referência do formulário em uma variável:

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

Agora, no corpo da requisição, como dados, vamos especificar o objeto FormData. E ao próprio objeto, passaremos como parâmetro a referência ao formulário:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // passamos a referência ao formulário
	});
	
	event.preventDefault();
});

Como resultado, no servidor, poderemos obter os valores dos inputs pelos seus nomes através dos atributos name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'dados do formulário recebidos';
	}
}

Dado um formulário com cinco inputs, nos quais são inseridos números. Envie este formulário para o servidor usando o método POST. Deixe que o servidor encontre a média aritmética dos números inseridos e envie o resultado de volta para o navegador.