Crie formulários da web: compreender facilmente pedidos GET

Neste tutorial, você aprenderá como receber e processar dados de formulário usando o método GET. Você criará um formulário HTML simples e verá como esses dados são enviados para o seu servidor através do endereço. Vamos discutir os conceitos básicos da solicitação GET e destacar os passos necessários no Express.js.

Principais conclusões

• Os dados do formulário podem ser enviados ao servidor usando o método GET.
• Os dados enviados aparecem como parâmetros de consulta na URL.
• Você pode facilmente acessar e processar os parâmetros de consulta da solicitação.

Guia passo a passo

Primeiro, começaremos criando um formulário HTML. A ação do seu formulário é crucial, pois indica para onde os dados do formulário serão enviados.

Para criar um formulário simples, adicione o seguinte:

A ação do formulário contém o caminho para onde os dados serão enviados, neste caso /submitform. Lá, mais tarde, o manipulador GET será definido em nosso servidor Express. Para a entrada, usaremos um campo de texto simples:

Depois de configurar o formulário, certifique-se de que o servidor esteja pronto para receber os dados. Você precisará garantir que tenha configurado o método GET em seu servidor Express para lidar com as solicitações.

Em seguida, recarregue a página para garantir que tudo funcione. Ao digitar algo no campo de texto, você pode enviar o formulário pressionando a tecla Enter, mesmo que não haja um botão de envio.

Após enviar o formulário, você deve receber uma resposta do servidor confirmando que os dados foram enviados com sucesso.

Aqui você pode ver a carga útil que foi enviada para o servidor. Neste caso, o parâmetro Nome foi anexado à URL.

No código do servidor, agora vamos analisar o manipulador GET correspondente que precisamos para processar a solicitação. O código estará em seu arquivo index.js. Você define o manipulador da seguinte maneira:

Agora você pode recuperar os parâmetros de consulta no código do servidor, acessando request.query. Você pode implementar isso também em seu manipulador GET.

Quando você enviar o formulário novamente, verá que o parâmetro está sendo retornado corretamente. Certifique-se de reiniciar o servidor sempre que fizer alterações nele.

Para acessar o nome, você usa o formato request.query.Name. Se você alterar o nome no formulário, certifique-se de também ajustar o parâmetro no código do servidor.

Se você mudar o nome no formulário para first_name, o parâmetro solicitado será o seguinte:

Você pode ver que o servidor está recebendo e exibindo os dados corretamente:

Com esse conhecimento básico, você pode agora processar os dados recebidos, como salvá-los em um banco de dados, usá-los em outro lugar ou simplesmente retorná-los.

Se desejar, você pode até enviar os dados recebidos de volta ao cliente e atuar como um servidor de eco.

A saída poderia ser semelhante a isto:

Se você inserir caracteres especiais no campo de texto, o servidor também irá processá-los e decodificá-los conforme necessário. Você notará que a saída será correta, independentemente dos caracteres inseridos pelo usuário.

É importante observar que diferentes frameworks de servidor lidam de maneira diferente com as codificações. Ao usar o Express, a decodificação dos parâmetros de consulta geralmente já está incluída, então você não precisa se preocupar com isso.

Agora você tem o básico para lidar com solicitações GET, e também discutimos o uso de parâmetros de consulta no framework Express. Em seguida, vamos abordar o método POST, que requer uma implementação diferente.

Resumo

Neste tutorial, você aprendeu como criar uma aplicação de formulário web simples usando o método GET. O processo envolve configurar um formulário HTML, enviar os dados do formulário para um servidor Express e obter parâmetros de consulta para processamento adicional. Você também viu como configurar corretamente o servidor para receber e responder aos dados do formulário.