Készíts webes űrlapokat: Értsd meg könnyedén a GET kéréseket

Ebben a tutorialban megtanulod, hogyan tudod kikérni és feldolgozni az űrlapadatokat a GET-módszer segítségével. Létre fogsz hozni egy egyszerű HTML-űrlapot, és látni fogod, hogyan küldik el ezeket az adatokat a szerveredre az URL-címen keresztül. Meg fogjuk beszélni a GET-kérés alapjait és összefoglaljuk a szükséges lépéseket az Express.js-ben.

Legfontosabb megállapítások

• Az űrlapadatokat el lehet küldeni a szervernek a GET-módszerrel.
• A továbbított adatok megjelennek lekérdezési paraméterként az URL-ben.
• Egyszerűen hozzáférhetsz a kérés lekérdezési paramétereihez és tovább dolgozhatod azokat.

Lépésről lépésre útmutató

Először is elkezdjük az HTML-űrlap létrehozásával. Az űrlap action része döntő fontosságú, mivel megadja, hogy az űrlapadatok hová lesznek elküldve.

Egy egyszerű űrlap létrehozásához kövesd az alábbiakat:

Az űrlap action része tartalmazza az elérési utat, ahova az adatokat elküldik, jelen esetünkben /submitform. Ott fog később a GET-kezelőt meghatározni a Express-szerverünkben. Az input részéhez egyszerű szövegmezőt használunk:

Amikor az űrlap elkészül, győződj meg róla, hogy a szerver készen áll az adatok fogadására. Biztosítanod kell, hogy a GET-módszert konfigurálva legyen a Express-szerveredben az új kérések kezeléséhez.

Ezután frissítsd az oldalt, hogy megbizonyosodj róla, hogy minden működik. Ha beírsz valamit a szövegmezőbe, elküldheted az űrlapot az Enter billentyű megnyomásával, akkor is, ha nincs beküldési gomb.

Az űrlap beküldése után érkeznie kell egy válasznak a szerverről, amely megerősíti, hogy az adatok sikeresen elküldésre kerültek.

Itt láthatod a payload-ot, amelyet a szervernek elküldtek. Jelen esetünkben a Name paramétert hozzáadták az URL-hez.

A szerverkódban most megvizsgáljuk az adott GET-kezelőt, amelyre szükségünk van a kérés feldolgozásához. A kódot a index.js fájlban találod. Így definiálod a kezelőt:

Most már elérheted a lekérdezési paramétereket a szerverkódban azáltal, hogy a request.query-hoz férkőzöl. Ezt szintén implementálhatod a GET-kezelődben.

Ha újra elküldöd az űrlapot, látni fogod, hogy a paraméter helyesen visszakerül. Mindig győződj meg róla, hogy minden szerveroldali változtatás után újraindítod a szervert.

Az Névhez való hozzáféréshez a request.query.Name formátumot használd. Ha megváltoztatod a névet az űrlapon, ügyelj rá, hogy a paramétert a szerverkódban is módosítsd.

Ha az űrlapon az Név-et first_name-re változtatod, a megfelelő paraméter így fog kinézni:

Láthatod, hogy a szerver helyesen fogadja és visszaadja az adatokat:

Ezzel a tudással most már képes leszel az érkezett adatokat feldolgozni, például adatbázisban tárolni, másutt felhasználni vagy egyszerűen visszaadni.

Ha szeretnéd, még visszaküldheted az érkezett adatokat a kliensnek, és mint Echo-szerver működhetsz.

A kimenet a következőképpen nézhet ki:

Ha különleges karaktereket adsz meg a szövegmezőbe, a szerver ezeket is feldolgozza és megfelelően dekódolja. Észre fogod venni, hogy a kimenet helyes lesz, függetlenül attól, hogy milyen karaktereket adott meg a felhasználó.

Fontos megjegyezni, hogy különböző szerver keretrendszerek másképp kezelik a kódolásokat. Az Express használatakor általában a lekódolás már benne van a lekérdezési paraméterek dekódolásában, tehát nem kell ezen aggódnod.

Most megvan az alapok a GET kérések feldolgozásához, és már megbeszéltük a Query-paraméterek használatát az Express keretrendszerben. A következő lépésben foglalkozni fogunk a POST módszerrel, amely más implementációt igényel.

Összefoglalás

Ebben a tutorialban megtanultad, hogyan hozz létre egy egyszerű web-forma alkalmazást a GET módszerrel. A folyamat magában foglalja egy HTML űrlap beállítását, az űrlapadatok elküldését egy Express szervernek és a Query-paraméterek lekérése további feldolgozás céljából. Láthattad, hogyan van helyesen konfigurálva a szerver a űrlapadatok fogadásához és reagálásához.