Twórz formularze internetowe: zrozumienie żądań GET jest proste

W tym samouczku dowiesz się, jak odbierać i przetwarzać dane formularza za pomocą metody GET. Stworzysz prosty formularz HTML i zobaczysz, jak te dane są wysyłane do Twojego serwera przez adres. Omówimy podstawy żądania GET i nakreślimy niezbędne kroki w Express.js.

Najważniejsze wnioski

• Dane formularza można wysłać na serwer za pomocą metody GET.
• Przesłane dane pojawią się jako parametry zapytania w adresie URL.
• Możesz łatwo uzyskać dostęp do parametrów zapytania żądania i kontynuować ich przetwarzanie.

Krok po kroku

Zacznijmy od stworzenia formularza HTML. Ważne jest, aby określić akcję formularza, która określa, dokąd zostaną wysłane dane formularza.

Aby stworzyć prosty formularz, dodaj następujące elementy:

Akcja formularza zawiera ścieżkę, do której mają być wysyłane dane, w naszym przypadku /submitform. W tym miejscu później zdefiniowany będzie obsługa GET w naszym serwerze Express. Do wprowadzania danych użyjemy prostego pola tekstowego:

Po skonfigurowaniu formularza musimy upewnić się, że serwer jest gotowy do odbioru danych. Musisz zapewnić, że metoda GET jest skonfigurowana w twoim serwerze Express do obsługi żądań.

Następnie odśwież stronę, aby upewnić się, że wszystko działa. Jeśli wpiszesz coś w polu tekstowym, możesz wysłać formularz, naciskając klawisz Enter, nawet jeśli nie ma przycisku wysyłania.

Po wysłaniu formularza powinna nadejść odpowiedź z serwera potwierdzająca pomyślne przesłanie danych.

Tutaj możesz zobaczyć dane, które zostały wysłane do serwera. W naszym przypadku parametr Name został dołączony do adresu URL.

W kodzie serwera przeglądamy teraz odpowiednią obsługę GET, którą będziemy potrzebować do przetworzenia żądania. Kod będzie znajdować się w twoim pliku index.js. Definujesz obsługę w następujący sposób:

Teraz możesz uzyskać parametry zapytania w kodzie serwera, odwołując się do request.query. Możesz również zastosować to w swoim obszarze GET-Handlera.

Po ponownym wysłaniu formularza zobaczysz, że parametr zostanie poprawnie zwrócony. Pamiętaj, aby po każdej zmianie na serwerze ponownie uruchomić serwer.

Aby uzyskać dostęp do nazwy, użyj formatu request.query.Name. Jeśli zmienisz nazwę w formularzu, pamiętaj, aby dostosować parametr w kodzie serwera.

Jeśli zmienisz nazwę w formularzu na first_name, żądany parametr będzie wyglądał następująco:

Możesz zobaczyć, że serwer poprawnie odbiera i zwraca dane:

Mając tę wiedzę w podstawach, możesz teraz przetwarzać otrzymane dane, na przykład zapisując je w bazie danych, używając ich gdzie indziej lub po prostu je zwracając.

Jeśli chcesz, możesz nawet wysłać otrzymane dane z powrotem do klienta i działać jak serwer echa.

Wyjście może wyglądać następująco:

Jeśli wprowadzisz znaki specjalne w polu tekstowym, serwer również je przetworzy i odpowiednio zdekoduje. Zauważysz, że wyjście będzie poprawne, niezależnie od znaków wprowadzonych przez użytkownika.

Ważne jest zauważenie, że różne ramy serwerowe obsługują kodowania w różny sposób. Przy użyciu Express dekodowanie parametrów zapytania jest zazwyczaj już zawarte, więc nie musisz się tym martwić.

Teraz masz podstawy przetwarzania zapytań GET, omówiliśmy również używanie parametrów zapytania w frameworku Express. Następnym krokiem będzie zajęcie się metodą POST, która wymaga innej implementacji.

Podsumowanie

W tym tutorialu nauczyłeś się, jak tworzyć prostą aplikację formularza sieciowego za pomocą metody GET. Proces obejmuje konfigurowanie formularza HTML, przesyłanie danych formularza do serwera Express i pobieranie parametrów zapytania w celu dalszej obróbki. Zobaczyłeś również, jak właściwie skonfigurować serwer, aby przyjąć dane formularza i na nie zareagować.