JSON e AJAX no Express com Node.js

JSON é um dos formatos mais populares para armazenamento e transmissão de dados, e o Express possui todas as funcionalidades necessárias para trabalhar com JSON.

Recebendo dados em formato JSON

Vamos supor que na pasta do projeto exista um arquivo index.html com o seguinte código:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Insira seus dados</h1>
    <form id="myForm" action="/user" method="post">
      <p>
        <label>Nome</label><br />
        <input type="text" name="userName" />
      </p>
      <p>
        <label>Idade</label><br />
        <input type="number" name="userAge" />
      </p>
      <input type="submit" value="Enviar" />
    </form>
    <script>
      // dados para envio
      const myForm = document.getElementById("myForm");
      myForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        // dados para envio
        const username = myForm.userName.value;
        const userage = myForm.userAge.value;

        const response = await fetch("/user", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name: username, age: userage }),
        });
        // extraindo texto da resposta do objeto de resposta
        const responseText = await response.text();
        console.log(responseText);
      });
    </script>
  </body>
</html>

Aqui, temos um formulário com dois campos para inserir o nome e a idade do usuário. Ao enviar o formulário, um manipulador de eventos intercepta o envio. Na função do manipulador, obtemos os valores dos campos, serializamos em um objeto JSON, e enviamos para o servidor usando AJAX no endereço /user.

Em seguida, definimos no arquivo principal da aplicação - app.js - o código que receberá os dados enviados:

const express = require("express");

const app = express();
// criando um parser para dados em formato JSON
const jsonParser = express.json();

app.post("/user", jsonParser, function (request, response) {
  const user = request.body;
  console.log(user);
  if (!user) return response.sendStatus(400);
  const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
  response.send(responseText); // enviando resposta
});

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

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

Primeiramente, para receber dados em formato JSON, é necessário criar um parser utilizando a função json() do Express:

const jsonParser = express.json();

Depois, aplicamos jsonParser para realizar o parsing automático do corpo da requisição em um objeto JSON, e enviamos uma resposta ao cliente com uma string baseada nos dados recebidos:

app.post("/user", jsonParser, function (request, response) {
  const user = request.body;
  console.log(user);
  if (!user) return response.sendStatus(400);
  const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
  response.send(responseText); // enviando resposta
});

Neste caso, request.body representará o objeto JSON enviado pelo cliente. Como o objeto enviado pelo cliente contém as propriedades name e age, podemos acessá-las usando request.body.name e request.body.age.

Vamos executar a aplicação e acessar a raiz do site. Insira alguns dados e, após o envio, a resposta do servidor será exibida no console do navegador:

Exemplo de envio de dados em formato JSON com AJAX no Express

Vale destacar que, em vez de criar explicitamente o objeto jsonParser, podemos integrar o parsing automático de JSON no pipeline de tratamento de requisições usando o método:

app.use(express.json());

Dessa forma, o arquivo app.js ficará assim:

const express = require("express");

const app = express();
// configurando o parsing automático do corpo da requisição em JSON
app.use(express.json());

app.post("/user", function (request, response) {
  const user = request.body;
  console.log(user);
  if (!user) return response.sendStatus(400);
  const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
  response.send(responseText); // enviando resposta de volta
});

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

app.listen(3000);

Enviando Dados em Formato JSON

Para enviar dados em formato JSON, utilizamos o método response.json(). Em princípio, podemos enviar um objeto usando o método padrão response.send(request.body). No entanto, o método response.json() também define o cabeçalho "Content-Type" como "application/json", serializa os dados em JSON usando a função JSON.stringify() e então envia os dados usando response.send().

Vamos definir um exemplo de envio de dados em formato JSON no arquivo app.js:

const express = require("express");

const app = express();
// configurando o parsing automático do corpo da requisição em JSON
app.use(express.json());

app.post("/user", function (request, response) {
  const user = request.body;
  console.log(user);
  if (!user) return response.sendStatus(400);
  const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
  response.json({ message: responseText }); // enviando dados em formato JSON
});

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

app.listen(3000);

Aqui, enviamos os mesmos dados do exemplo anterior, mas agora eles são colocados na propriedade message do objeto enviado. Para enviar o objeto, utilizamos o método response.json.

No código do cliente, na página index.html, obteremos a resposta do servidor em formato JSON:

<!DOCTYPE html>
<html>
  <head>
    <title>Programício</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Insira seus dados</h1>
    <form id="myForm" action="/user" method="post">
      <p>
        <label>Nome</label><br />
        <input type="text" name="userName" />
      </p>
      <p>
        <label>Idade</label><br />
        <input type="number" name="userAge" />
      </p>
      <input type="submit" value="Enviar" />
    </form>
    <script>
      // dados para envio
      const myForm = document.getElementById("myForm");
      myForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        // dados para envio
        const username = myForm.userName.value;
        const userage = myForm.userAge.value;

        const response = await fetch("/user", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name: username, age: userage }),
        });
        // obtendo o objeto enviado em formato JSON
        const data = await response.json();
        console.log(data.message);
      });
    </script>
  </body>
</html>

Neste exemplo, a resposta do servidor é obtida em formato JSON e a mensagem é exibida no console. Assim, estamos garantindo que os dados são corretamente enviados e recebidos utilizando JSON, proporcionando uma comunicação eficiente entre cliente e servidor.