Pular para o conteúdo

Construa formulários com rotas de API

Um formulário HTML faz com que o navegador atualize a página ou navegue para uma nova. Ao invés disso, para enviar dados de formulário para um endpoint de API, você deve interceptar o envio do formulário usando JavaScript.

Esta receita mostra como enviar dados de formulário para um endpoint de API e lidar com esses dados.

Pré-requisitos

Receita

  1. Crie um componente de formulário usando seu framework de UI. Cada input deve ter um atributo name que descreve o valor daquele input.

    Tenha certeza de incluir um elemento <button> ou <input type="submit"> para enviar o formulário.

    src/components/FeedbackForm.tsx
    export default function Formulario() {
    return (
    <form>
    <label>
    Nome
    <input type="text" id="nome" name="nome" required />
    </label>
    <label>
    Email
    <input type="email" id="email" name="email" required />
    </label>
    <label>
    Mensagem
    <textarea id="mensagem" name="mensagem" required />
    </label>
    <button>Enviar</button>
    </form>
    );
    }
  2. Crie um endpoint de API POST que receberá os dados do formulário. Use request.formData() para processá-lo. Tenha certeza de validar os valores do formulário antes de usá-los.

    Esse exemplo envia um objeto JSON com uma mensagem de volta para o cliente.

    src/pages/api/feedback.ts
    import type { APIRoute } from "astro";
    export const post: APIRoute = async ({ request }) => {
    const dados = await request.formData();
    const nome = dados.get("nome");
    const email = dados.get("email");
    const mensagem = dados.get("mensagem");
    // Valide os dados - você provavelmente vai querer fazer mais do que isso
    if (!nome || !email || !mensagem) {
    return new Response(
    JSON.stringify({
    message: "Preencha todos os campos obrigatórios",
    }),
    { status: 400 }
    );
    }
    // Faça algo com os dados, e então retorne uma resposta de sucesso
    return new Response(
    JSON.stringify({
    message: "Sucesso!"
    }),
    { status: 200 }
    );
    };
  3. Crie uma função que aceita um evento submit, então passe-a como um manipulador de evento submit para o seu formulário. Na função, chame preventDefault no evento para sobrepor o processo de envio padrão do navegador.

    Então, crie um objeto FormData e envie-o para seu endpoint usando fetch.

    src/components/FeedbackForm.tsx
    import { useState } from "preact/hooks";
    export default function Formulario() {
    const [respostaMensagem, setRespostaMensagem] = useState("");
    async function submit(e: SubmitEvent) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const resposta = await fetch("/api/feedback", {
    method: "POST",
    body: formData,
    });
    const dados = await resposta.json();
    if (data.mensagem) {
    setRespostaMensagem(data.mensagem);
    }
    }
    return (
    <form onSubmit={submit}>
    <label>
    Nome
    <input type="text" id="nome" name="nome" required />
    </label>
    <label>
    Email
    <input type="email" id="email" name="email" required />
    </label>
    <label>
    Mensagem
    <textarea id="mensagem" name="mensagem" required />
    </label>
    <button>Enviar</button>
    {respostaMensagem && <p>{respostaMensagem}</p>}
    </form>
    );
    }