Skapa webbformulär: Förstå enkelt GET-förfrågningar

I den här handledningen lär du dig hur du tar emot och bearbetar formulärdata med GET-metoden. Du kommer att skapa en enkel HTML-formulär och se hur dessa data skickas till din server via adressen. Vi kommer att diskutera grunderna i GET-förfrågan och skissa de nödvändiga stegen i Express.js.

Viktigaste insikter

• Formulärdata kan skickas till servern med GET-metoden.
• De skickade data visas som frågeparametrar i URL:en.
• Du kan enkelt komma åt och bearbeta query-parametrarna från förfrågan.

Steg-för-steg-guide

Först ska vi börja med att skapa ett HTML-formulär. Handlingen för ditt formulär är avgörande eftersom den anger vart formulärdatan ska skickas.

För att skapa ett enkelt formulär, lägg till följande:

Handlingen för formuläret innehåller sökvägen där datan ska skickas, i vårt fall /submitform. Där kommer sedan GET-handler definieras i vår Express-server. För inmatningen använder vi ett simpelt textfält:

Efter att formuläret är inställt, bör vi försäkra oss om att servern är redo att ta emot datan. Du måste se till att du har konfigurerat GET-metoden i din Express-server för att hantera förfrågningarna.

Nästa steg är att uppdatera sidan för att se till att allt fungerar. Om du skriver något i textfältet kan du skicka formuläret genom att trycka på Retur, även om det inte finns någon Submit-knapp tillgänglig.

Efter att ha skickat formuläret bör du få ett svar från servern som bekräftar att datan har skickats framgångsrikt.

Här kan du se den payload som skickades till servern. I vårt fall har parametern Name bifogats till URL:en.

I serverkoden tittar vi nu på den motsvarande GET-hanteraren som behövs för att bearbeta förfrågan. Koden kommer att finnas i din index.js-fil. Du definierar hanteraren på följande sätt:

Nu kan du hämta query-parametrarna i serverkoden genom att komma åt request.query. Detta kan du också implementera i din GET-hanterare.

När du skickar formuläret på nytt kommer du se att parametern returneras korrekt. Se till att du startar om servern varje gång du gör en ändring på servern.

För att komma åt namnet använder du formatet request.query.Name. Om du ändrar namnet i formuläret måste du se till att parametern också anpassas i serverkoden.

Om du ändrar namnet i formuläret till first_name kommer den krävda parametern att se ut så här:

Du kan se att servern tar emot och skriver ut datan korrekt:

Med denna grundläggande kunskap kan du nu bearbeta de mottagna datan, till exempel spara dem i en databas, använda dem på andra platser eller helt enkelt returnera dem.

Om du vill kan du till och med skicka tillbaka de mottagna datan till klienten och agera som en echo-server.

Utmatningen kan se ut som följer:

Om du anger specialtecken i textrutan kommer servern också att bearbeta och dekodera dem. Du kommer märka att utmatningen sker korrekt, oavsett vilka tecken användaren har skrivit in.

Det är viktigt att notera att olika serverramverk hanterar Encodings på olika sätt. När du använder Express är det vanligtvis redan inkluderat att avkoda frågeparametrar, så att du inte behöver oroa dig för det.

Nu har du grunderna för att hantera GET-Request, och vi har även diskuterat användningen av Query-parametrar i Express-ramverket. Nästa steg är att behandla POST-metoden, som kräver en annan implementering.

Sammanfattning

I denna handledning har du lärt dig hur du kan skapa en enkel webbformulärapplikation med GET-metoden. Processen innefattar att skapa ett HTML-formulär, skicka formulärdata till en Express-server och hämta frågeparametrar för vidarebearbetning. Du har också sett hur servern konfigureras korrekt för att ta emot formulärdata och svara på den.