Maak webformulieren: begrijp GET-verzoeken eenvoudig

In deze tutorial leer je hoe je met de GET-methode formuliergegevens kunt ontvangen en verwerken. Je zult een eenvoudig HTML-formulier maken en zien hoe deze gegevens via het adres naar je server worden gestuurd. We zullen de basisprincipes van het GET-verzoek bespreken en de noodzakelijke stappen in Express.js schetsen.

Belangrijkste inzichten

• Formuliergegevens kunnen met de GET-methode naar de server worden gestuurd.
• De verzonden gegevens verschijnen als queryparameters in de URL.
• Je kunt eenvoudig toegang krijgen tot en verder werken met de queryparameters van het verzoek.

Stapsgewijze handleiding

We beginnen met het maken van een HTML-formulier. De Action van je formulier is cruciaal, omdat het aangeeft waar de formuliergegevens naartoe worden gestuurd.

Om een eenvoudig formulier te maken, voeg je het volgende toe:

De Action van het formulier bevat het pad waar de gegevens naartoe moeten worden gestuurd, in ons geval /submitform. Daar wordt later de GET-handler in onze Express-server gedefinieerd. Voor de invoer gebruiken we een eenvoudig tekstveld:

Nadat het formulier is opgezet, moeten we ervoor zorgen dat de server gereed is om de gegevens te ontvangen. Je moet ervoor zorgen dat je de GET-methode hebt geconfigureerd in je Express-server om de verzoeken te verwerken.

Vervolgens vernieuw je de pagina om er zeker van te zijn dat alles werkt. Als je iets in het tekstveld typt, kun je het formulier verzenden door op Enter te drukken, zelfs als er geen verzendknop aanwezig is.

Nadat het formulier is verzonden, moet er een reactie van de server komen die bevestigt dat de gegevens succesvol zijn verzonden.

Hier kun je de payload zien die naar de server is verzonden. In ons geval is de parameter Naam toegevoegd aan de URL.

In de servercode bekijken we nu de bijbehorende GET-handler die we nodig hebben om het verzoek te verwerken. De code bevindt zich in je index.js bestand. Je definieert de handler als volgt:

Vervolgens kun je de queryparameters in de servercode ophalen door toegang te krijgen tot request.query. Dit kun je ook implementeren in je GET-handler.

Wanneer je het formulier opnieuw verzendt, zul je zien dat de parameter correct wordt geretourneerd. Let erop dat je de server bij elke wijziging opnieuw start.

Om toegang te krijgen tot de Naam, gebruik je het formaat request.query.Naam. Als je de Naam in het formulier wijzigt, moet je ervoor zorgen dat de parameter ook wordt aangepast in de servercode.

Als je de Naam in het formulier wijzigt naar voornaam, ziet de vereiste parameter er als volgt uit:

Je kunt zien dat de server de gegevens correct ontvangt en weergeeft:

Met deze basiskennis kun je nu de ontvangen gegevens verwerken, bijvoorbeeld door ze op te slaan in een database, elders te gebruiken, of eenvoudigweg terug te geven.

Als je wilt, kun je de ontvangen gegevens zelfs terugsturen naar de client en optreden als een echo-server.

De output zou er dan als volgt uitzien:

Als je speciale tekens invoert in het tekstveld, zal de server deze ook verwerken en dienovereenkomstig decoderen. Je zult merken dat de output correct is, ongeacht de tekens die de gebruiker heeft ingevoerd.

Het is belangrijk op te merken dat verschillende serverframeworks anders omgaan met encodings. Bij het gebruik van Express is het decoderen van de queryparameters meestal al inbegrepen, zodat je je daar geen zorgen over hoeft te maken.

Je hebt nu de basisprincipes geleerd over het verwerken van GET-verzoeken, en we hebben ook gesproken over het gebruik van queryparameters in het Express-framework. Als volgende stap gaan we kijken naar de POST-methode, die een andere implementatie vereist.

Samenvatting

In deze tutorial heb je geleerd hoe je een eenvoudige webformulierapplicatie met de GET-methode kunt maken. Het proces omvat het opzetten van een HTML-formulier, het verzenden van de formuliergegevens naar een Express-server en het ophalen van queryparameters voor verdere verwerking. Je hebt ook gezien hoe de server correct is geconfigureerd om de formuliergegevens te ontvangen en erop te reageren.