Enviando Formulários em Node.js
Uma das maneiras de enviar dados para o servidor é por meio de formulários. Por padrão, o Node.js não possui funcionalidade integrada para receber dados de formulários enviados. Por exemplo, suponha que em nosso projeto temos uma página web index.html com um formulário de envio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<form action="user" method="post">
<p>
<label>Nome:</label><br />
<input name="username" />
</p>
<p>
<label>Idade:</label><br />
<input name="userage" type="number" />
</p>
<input type="submit" value="Enviar" />
</form>
</body>
</html>Neste formulário, temos dois campos de entrada: o campo username para inserir o nome e o campo userage para inserir a idade. Ao clicar no botão, os dados inseridos são enviados em uma requisição do tipo POST para o endereço /user. Vamos ver como podemos obter esses dados em uma aplicação Node.js.
Quando o formulário é enviado, o corpo da requisição conterá dados no formato:
username=John&userage=30Geralmente, para analisar formulários enviados, utilizam-se pacotes especiais ou funcionalidades de frameworks como o Express. No entanto, se necessário, podemos definir essa funcionalidade por conta própria. Assim, definimos no arquivo app.js o seguinte código:
const http = require("http");
const fs = require("fs");
http
.createServer(async (request, response) => {
if (request.url == "/user") {
let body = ""; // buffer para os dados recebidos
// recebendo dados da requisição no buffer
for await (const chunk of request) {
body += chunk;
}
// para o parâmetro name
let userName = "";
// para o parâmetro age
let userAge = 0;
// dividindo a requisição em parâmetros pelo símbolo &
const params = body.split("&");
// percorrendo todos os parâmetros e definindo seus valores
for (param of params) {
// dividindo cada parâmetro em nome e valor
const [paramName, paramValue] = param.split("=");
if (paramName === "username") userName = paramValue;
if (paramName === "userage") userAge = paramValue;
}
response.end(`Seu nome: ${userName} Sua Idade: ${userAge}`);
} else {
fs.readFile("index.html", (_, data) => response.end(data));
}
})
.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));Ao processar a requisição, podemos obter o caminho para o recurso solicitado utilizando a propriedade request.url. Como o formulário na página web envia dados para o endereço /user, processamos a requisição para esse endereço:
if(request.url == "/user") {Para obter os valores do formulário enviado, lemos o corpo da requisição em uma variável body:
let body = ""; // buffer para os dados recebidos
for await (const chunk of request) {
body += chunk;
}Nossa tarefa agora é extrair os nomes e valores dos campos do formulário. Para isso, primeiro dividimos o corpo da requisição em parâmetros individuais:
const params = body.split("&");Em seguida, percorremos todos os parâmetros e extraímos seus nomes (nomes dos campos do formulário) e seus valores:
for (param of params) {
const [paramName, paramValue] = param.split("=");
if (paramName === "username") userName = paramValue;
if (paramName === "userage") userAge = paramValue;
}Vale ressaltar que esta não é uma análise universal e é direcionada para uma tarefa específica: obter o nome e a idade do usuário enviados.
Após obter os dados da requisição, enviamos uma mensagem de resposta ao cliente:
response.end(`Seu nome: ${userName} Sua Idade: ${userAge}`);Finalmente, na linha de comando, navegamos até a pasta do servidor e iniciamos o servidor:
C:\app>node server.js Servidor iniciado em http://localhost:3000
Após iniciar o servidor, podemos acessar no navegador o endereço http://localhost:3000, e será exibida a página com o formulário. Inserimos alguns dados no formulário e a aplicação Node.js receberá os dados e enviará uma resposta com a seguinte mensagem:
Seu nome: [Nome inserido] Sua Idade: [Idade inserida]