Methoden voor het verzenden van formulieren in JavaScript

Formulieren kunnen op twee manieren worden verzonden: met de GET-methode of de POST-methode. De verzendmethode van het formulier wordt gereguleerd door het attribuut method van het formulier.

Laten we bijvoorbeeld de GET-verzendmethode voor het formulier specificeren:

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

En nu de POST-methode:

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Laten we nu eens kijken wat het verschil is tussen de twee verzendmethoden. In het geval van de GET-methode zullen de formuliergegevens zichtbaar zijn in de browser in de vorm van een zogenaamde query string (query string), die bestaat uit paren van het type sleutel-waarde, waarbij de sleutel de naam van het formulierelement is, en de waarde - de ingevoerde gegevens. Hierbij zullen de waardeparen gescheiden worden door ampersands.

Gegevens die met de GET-methode zijn verzonden, komen op onze server terecht in de eigenschap get van het object met gegevens:

export default {
	'/handler/': function(data) {
		console.log(data.get); // wordt weergegeven in de serverconsole
		return 'form data received';
	}
}

En gegevens die met de POST-methode zijn verzonden, komen op onze server terecht in de eigenschap post van het object met gegevens:

export default {
	'/handler/': function(data) {
		console.log(data.post); // wordt weergegeven in de serverconsole
		return 'form data received';
	}
}

Voor de kortheid kan destructuring worden uitgevoerd, om onze gegevens in een aparte variabele te krijgen:

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