Requisições POST e Envio de Formulários - Node.js

Ao enviar dados complexos, normalmente são utilizadas formulários. Vamos ver como receber dados enviados no Express.

Primeiro, definimos um novo arquivo index.html na pasta do projeto com um formulário de entrada de dados:

<!DOCTYPE html>
<html>
<head>
    <title>Registro</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Digite seus dados</h1>
    <form method="post">
        <label>Nome</label><br>
        <input type="text" name="userName" /><br><br>
        <label>Idade</label><br>
        <input type="number" name="userAge" /><br><br>
        <input type="submit" value="Enviar" />
    </form>
</body>
</html>

Aqui, definimos dois campos para entrada de nome e idade do usuário.

No arquivo app.js, definimos o seguinte código:

const express = require("express");

const app = express();

// criando um parser para dados application/x-www-form-urlencoded
const urlencodedParser = express.urlencoded({extended: false});

app.get("/", function (_, response) {
    response.sendFile(__dirname + "/index.html");
});

app.post("/", urlencodedParser, function (request, response) {
    if (!request.body) return response.sendStatus(400);
    console.log(request.body);
    response.send(`${request.body.userName} - ${request.body.userAge}`);
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Primeiramente, para receber os dados enviados, é necessário criar um parser:

const urlencodedParser = express.urlencoded({extended: false});

Como os dados são enviados por meio de um formulário, utilizamos a função urlencoded() para criar o parser. Passamos um objeto que define os parâmetros de parsing. O valor extended: false indica que o objeto resultante do parsing será um conjunto de pares chave-valor, onde cada valor pode ser uma string ou um array.

Ao acessar o endereço /, o método app.get será acionado, enviando ao usuário o arquivo index.html.

Como os dados são enviados pelo método POST, definimos a função app.post("/",...) para tratar a requisição. O primeiro parâmetro da função é o endereço para onde os dados serão enviados, neste caso /. No código do formulário no arquivo index.html, não especificamos o endereço de envio, então os dados serão enviados para o mesmo endereço onde a página está disponível, ou seja, /. Assim, temos duas funções associadas ao endereço /, uma que trata as requisições GET e outra que trata as requisições POST. O segundo parâmetro é o parser criado anteriormente. O terceiro parâmetro é o handler:

app.post("/", urlencodedParser, function (request, response) {
  if (!request.body) return response.sendStatus(400);
  console.log(request.body);
  response.send(`${request.body.userName} - ${request.body.userAge}`);
});

Para obter os dados enviados, utilizamos expressões como request.body.userName, onde request.body encapsula os dados do formulário, e userName é a chave que corresponde ao valor do atributo name do campo de entrada na página HTML:

<input type="text" name="userName" />

Execute a aplicação e acesse a página index.html:

Após o envio, os dados inseridos serão recebidos na função app.post("/",...), que exibirá o resultado do processamento:

Envio de formulários no Express e Node.js