Formulierverzending in JavaScript

Je weet al hoe je met formulierelementen kunt werken in JavaScript, door ze in de browser te verwerken. Formulieren kunnen echter ook naar de server worden verzonden, zodat ze verwerkt kunnen worden door de serverkant van de website, geschreven in PHP of NodeJS.

Dit is nodig om gegevens van de website, die op de server zijn opgeslagen, toe te voegen en te wijzigen.

Laten we eens kijken hoe dat gaat. Stel dat we een aantal invoervelden en een knop hebben:

<input>
<input>
<input type="submit">

Laten we onze elementen in een form-tag wrappen. In dat geval krijgen we een formulier dat bij het indrukken van de knop naar de server wordt verzonden:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Om de formuliergegevens op de server te kunnen ontvangen, moet elk invoerveld een eigen naam krijgen:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

In dat geval komen de formuliergegevens op de server aan in de vorm van sleutel-waarde-paren, waarbij de sleutels de namen van de formulierelementen zijn, en de waarden de ingevoerde gegevens.

Om een formulier te verzenden, is een server niet strikt noodzakelijk. Je kunt de gegeven formuliercode in een willekeurig bestand kopiëren, het in de browser uitvoeren en op de verzendknop drukken - het formulier wordt verzonden en de browserpagina wordt herladen.

Zonder server zullen de formuliergegevens echter nergens terechtkomen. Laten we daarom het formulier testen samen met een server. Je kent nog geen server-side talen, dus laten we oefenen met het verzenden van een formulier met behulp van onze leer HTTP server.

Laten we ons formulier in een bestand plaatsen zodat het toegankelijk is via het adres http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Laten we ons formulier het attribuut action toevoegen, dat het verzendadres van ons formulier aangeeft:

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

Schrijf nu in het bestand server.js een handler voor het formulierverzendadres:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

De parameter van onze handler ontvangt de verzonden formuliergegevens:

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

Maak een formulier en een bestand om het te verwerken. Verzend het formulier en controleer of de gegevens daadwerkelijk de server hebben bereikt.