Saltearse al contenido

Construye formularios con rutas API

Un formulario HTML hace que el navegador se actualice o navegue a una nueva página. Para enviar datos de formulario a un endpoint de API en su lugar, debes interceptar el envío del formulario usando JavaScript.

Esta receta muestra como enviar datos de un formulario a un endpoint de API y manejar esos datos.

  1. Crea un componente de formulario usando tu framework UI. Cada entrada debe tener un atributo name que describa el valor de esa entrada.

    Asegúrate de incluir un elemento <button> o <input type="submit"> para enviar el formulario.

    src/components/FeedbackForm.tsx
    export default function Form() {
    return (
    <form>
    <label>
    Nombre
    <input type="text" id="name" name="name" required />
    </label>
    <label>
    Correo electrónico
    <input type="email" id="email" name="email" required />
    </label>
    <label>
    Mensaje
    <textarea id="message" name="message" required />
    </label>
    <button>Enviar</button>
    </form>
    );
    }
  2. Crea el endpoint de API POST que recibirá los datos del formulario. Usa request.formData() para procesarlos. Asegúrate de validar los valores del formulario antes de usarlos.

    Este ejemplo manda un objeto JSON con un mensaje de vuelta al cliente.

    src/pages/api/feedback.ts
    import type { APIRoute } from "astro";
    export const POST: APIRoute = async ({ request }) => {
    const data = await request.formData();
    const name = data.get("name");
    const email = data.get("email");
    const message = data.get("message");
    // Valida los datos - probablemente querrás hacer más que esto
    if (!name || !email || !message) {
    return new Response(
    JSON.stringify({
    message: "Faltan campos requeridos",
    }),
    { status: 400 }
    );
    }
    // Haz algo con los datos, luego devuelve una respuesta de éxito
    return new Response(
    JSON.stringify({
    message: "¡Éxito!"
    }),
    { status: 200 }
    );
    };
  3. Crea una función que acepte un evento de envío, luego pásalo como un manejador de eventos submit a tu formulario. En la función, llama a preventDefault en el evento para anular el proceso de envío predeterminado del navegador.

    Luego, crea un objeto FormData y envíalo a tu endpoint usando fetch.

    src/components/FeedbackForm.tsx
    import { useState } from "preact/hooks";
    export default function Form() {
    const [responseMessage, setResponseMessage] = useState("");
    async function submit(e: SubmitEvent) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const response = await fetch("/api/feedback", {
    method: "POST",
    body: formData,
    });
    const data = await response.json();
    if (data.message) {
    setResponseMessage(data.message);
    }
    }
    return (
    <form onSubmit={submit}>
    <label>
    Nombre
    <input type="text" id="name" name="name" required />
    </label>
    <label>
    Correo electrónico
    <input type="email" id="email" name="email" required />
    </label>
    <label>
    Mensaje
    <textarea id="message" name="message" required />
    </label>
    <button>Enviar</button>
    {responseMessage && <p>{responseMessage}</p>}
    </form>
    );
    }