В този урок ще научите как да получавате и обработвате формални данни с помощта на GET метода. Ще създадете проста форма в HTML и ще видите как тези данни се изпращат към вашия сървър през адреса. Ще обсъдим основите на GET заявката и ще обясним необходимите стъпки в Express.js.

Най-важни заключения

  • Формални данни могат да бъдат изпратени на сървъра с GET метода.
  • Изпратените данни се появяват като Query параметри в URL адреса.
  • Лесно можеш да достъпиш Query параметрите на заявката и да ги обработиш.

По стъпково ръководство

Първоначално започваме със създаването на HTML форма. Действието на формата е от съществено значение, тъй като показва къде ще бъдат изпратени формалните данни.

За да създадете проста форма, добавете следното:

Създаване на уеб формуляри: Лесно разбиране на GET заявки

Действието на формата съдържа пътя, по който данните трябва да бъдат изпратени, в нашия случай /submitform. Там по-късно ще дефинираме GET обработчика в нашия Express сървър. За въвеждане използваме едно просто текстово поле:

Създаване на уеб формуляри: лесно разбиране на GET заявките

След като формата е настроена, трябва да се уверите, че сървърът ви е готов да приеме данните. Трябва да се уверите, че сте конфигурирали GET метода във вашия Express сървър, за да обработвате заявките.

След това опреснете страницата, за да се уверите, че всичко работи. Ако въведете нещо в текстовото поле, можете да изпратите формата, като натиснете клавиша Enter, дори ако няма бутон за изпращане.

Създайте уеб формуляри: разбиране на GET заявки лесно

След като изпратите формата, трябва да получите отговор от сървъра, който потвърждава, че данните са изпратени успешно.

Създавайте уеб формуляри: Лесно разбиране на GET заявките

Тук можете да видите данните, които са изпратени на сървъра. В нашия случай параметърът Name е прикачен към URL адреса.

В сървърния код вече ще разгледаме съответния GET обработчик, който е нужен за обработка на заявката. Кода ще се намира във вашия файл index.js. Ще дефинирате обработчика по следния начин:

Създайте уеб формуляри: Лесно разбиране на GET заявките

Сега можете да достъпите Query параметрите в сървърния код, като използвате request.query. Това можете да приложите също и във вашия GET обработчик.

Създаване на уеб формуляри: Лесно разбиране на GET заявките

Когато отново изпратите формата, ще видите, че параметърът се връща правилно. Внимавайте при всяка промяна в сървъра да стартирате отново сървъра.

Създайте уеб формуляри: Лесно разбиране на GET заявките

За да достъпите името, използвайте формата request.query.Name. При промяна на името във формата трябва да се уверите, че параметърът също е актуализиран в сървърния код.

Създаване на уеб формуляри: разбиране на GET заявките лесно

Когато промените името във формата на first_name, изискваният параметър изглежда по следния начин:

Създаване на уеб формуляри: Лесно разбиране на GET заявките

Виждате, че сървърът правилно получава и изпраща данните:

Създаване на уеб формуляри: лесно разбиране на GET заявките

С това базово познание вече можете да обработвате получените данни, да ги запазвате в база данни, да ги използвате на друго място или просто да ги върнете.

Ако желаете, можете дори да върнете получените данни на клиента и да действате като Echo-сървър.

Създаване на уеб формуляри: лесно разбиране на GET заявките

Изходът след това може да изглежда по следния начин:

Създаване на уеб формуляри: Лесно разбиране на GET заявките

Ако въведете специални знаци в текстовото поле, сървърът ще ги обработи също и ще ги декодира съответно. Ще забележите, че изходът е правилен, независимо от знаците, които потребителят е въвел.

Създаване на уеб формуляри: лесно разбиране на GET заявките

Важно е да се отбележи, че различните рамки на сървъри обработват различно кодиранията. При използване на Express, декодирането на query-параметрите обикновено вече е включено, така че няма нужда да се тревожите по този въпрос.

Създавайте уеб формуляри: Лесно разбиране на GET заявките

Сега разполагате с основите за обработка на GET-заявките, а също така разгледахме използването на query-параметрите в рамката на Express. Следващата стъпка ще бъде да се заемем с POST-метода, която изисква различна имплементация.

Резюме

В този урок научихте как да създадете просто приложение за уеб формуляр с метода GET. Процесът включва настрояване на HTML-формуляр, изпращане на формулярни данни към сървъра на Express и извличане на query-параметрите за по-нататъшна обработка. Също така видяхте как сървърът е правилно конфигуриран, за да получава формулярни данни и да реагира на тях.

Често задавани въпроси

Какво е разликата между GET и POST?GET изпраща данни чрез URL, докато POST предава данните в тялото на заявката.

Как мога да използвам множество параметри в моя формуляр?Можете да добавите множество полета за въвеждане във вашия формуляр и да ги конфигурирате съответно на техните имена.

Как да се справя със специални знаци в данните на формуляра?Express автоматично обработва декодирането на специалните знаци.

Трябва ли да рестартирам сървъра всеки път, когато направя промяна?Да, всички промени в кода на сървъра изискват рестартиране на сървъра, за да влязат в сила.