Erstelle Web-Formulare: GET-Anfragen einfach verstehen

In diesem Tutorial lernst du, wie du mit der GET-Methode Formulardaten empfangen und verarbeiten kannst. Du wirst eine einfache HTML-Form erstellen und sehen, wie diese Daten über die Adresse an deinen Server gesendet werden. Wir werden die Grundlagen der GET-Anfrage besprechen und die notwendigen Schritte in Express.js umreißen.

Wichtigste Erkenntnisse

• Formulardaten können mit der GET-Methode an den Server gesendet werden.
• Die übermittelten Daten erscheinen als Query-Parameter in der URL.
• Du kannst einfach auf die Query-Parameter des Requests zugreifen und diese weiterverarbeiten.

Schritt-für-Schritt-Anleitung

Zunächst beginnen wir mit dem Erstellen einer HTML-Form. Die Action deiner Form ist entscheidend, da sie angibt, wohin die Formulardaten gesendet werden.

Um eine einfache Form zu erstellen, fügst du Folgendes hinzu:

Die Action der Form enthält den Pfad, an den die Daten gesendet werden sollen, in unserem Fall /submitform. Dort wird später der GET-Handler in unserem Express-Server definiert. Für die Eingabe verwenden wir ein einfaches Textfeld:

Nachdem die Form eingerichtet ist, sollten wir sicherstellen, dass der Server für den Empfang der Daten bereit ist. Du musst sicherstellen, dass du die GET-Methode in deinem Express-Server konfiguriert hast, um die Anfragen zu verarbeiten.

Als Nächstes lädst du die Seite neu, um sicherzustellen, dass alles funktioniert. Wenn du etwas in das Textfeld eingibst, kannst du die Form durch Drücken der Return-Taste abschicken, auch wenn kein Submission-Button vorhanden ist.

Nach dem Absenden der Form sollte eine Antwort vom Server kommen, die bestätigt, dass die Daten erfolgreich gesendet wurden.

Hier kannst du die Payload sehen, die an den Server gesendet wurde. In unserem Fall wurde der Parameter Name an die URL angehängt.

Im Server-Code schauen wir uns nun den entsprechenden GET-Handler an, den wir für die Verarbeitung der Anfrage benötigen. Der Code wird sich in deiner index.js Datei befinden. Du definierst den Handler wie folgt:

Nun kannst du die Query-Parameter im Server-Code abrufen, indem du auf request.query zugreifst. Dies kannst du ebenfalls in deinem GET-Handler umsetzen.

Wenn du die Form erneut absendest, wirst du sehen, dass der Parameter korrekt zurückgegeben wird. Achte darauf, dass du bei jeder Änderung am Server den Server neu startest.

Um auf den Namen zuzugreifen, verwendest du das Format request.query.Name. Wenn du den Namen in der Form änderst, musst du darauf achten, dass der Parameter auch im Server-Code angepasst wird.

Wenn du den Namen in der Form auf first_name änderst, sieht der geforderte Parameter wie folgt aus:

Du kannst sehen, dass der Server die Daten korrekt empfängt und ausgibt:

Mit diesem Grundlagenwissen kannst du nun die empfangenen Daten verarbeiten, zum Beispiel sie in einer Datenbank speichern, sie an anderer Stelle verwenden oder einfach nur zurückgeben.

Wenn du möchtest, kannst du die empfangenen Daten sogar an den Client zurücksenden und als Echo-Server agieren.

Die Ausgabe könnte dann wie folgt aussehen:

Falls du Sonderzeichen in das Textfeld eingibst, wird der Server diese ebenfalls verarbeiten und entsprechend dekodieren. Du wirst feststellen, dass die Ausgabe korrekt erfolgt, unabhängig von den Zeichen, die der Benutzer eingegeben hat.

Es ist wichtig zu beachten, dass verschiedene Server-Frameworks unterschiedlich mit Encodings umgehen. Bei der Verwendung von Express ist das Decoding der Query-Parameter in der Regel bereits enthalten, sodass du dir darüber keine Gedanken machen musst.

Jetzt hast du die Grundlagen für die Verarbeitung von GET-Requests, und wir haben auch die Verwendung von Query-Parametern im Express-Framework besprochen. Als nächstes werden wir uns mit der POST-Methode beschäftigen, die eine andere Implementierung erfordert.

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du eine einfache Web-Formularanwendung mit der GET-Methode erstellen kannst. Der Prozess beinhaltet das Einrichten einer HTML-Form, das Absenden der Formulardaten an einen Express-Server und das Abrufen von Query-Parametern zur weiteren Verarbeitung. Du hast auch gesehen, wie der Server korrekt konfiguriert wird, um die Formulardaten zu empfangen und darauf zu reagieren.