Saltar al contenido

Construir formularios con rutas de API

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

Esta receta te muestra cómo enviar datos del formulario a un endpoint de API y manejar esos datos.

Requisitos previos

Sección titulada “Requisitos previos”

Receta

Sección titulada “Receta”

  1. Crea un endpoint POST en /api/feedback que recibirá los datos del formulario. Usa request.formData() para procesarlo. Asegúrate de validar los valores del formulario antes de usarlos.

    Este ejemplo envía un objeto JSON con un mensaje de vuelta al cliente.

    src/pages/api/feedback.ts
    export const prerender = false; // Not needed in 'server' mode
    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");
      // Validate the data - you'll probably want to do more than this
      if (!name || !email || !message) {
        return new Response(
          JSON.stringify({
            message: "Missing required fields",
          }),
          { status: 400 }
        );
      }
      // Do something with the data, then return a success response
      return new Response(
        JSON.stringify({
          message: "Success!"
        }),
        { status: 200 }
      );
    };

  2. Crea un componente de formulario usando tu framework de UI. Cada input debería tener un atributo name que describa el valor de ese input.

    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>
            Name
            <input type="text" id="name" name="name" required />
          </label>
          <label>
            Email
            <input type="email" id="email" name="email" required />
          </label>
          <label>
            Message
            <textarea id="message" name="message" required />
          </label>
          <button>Send</button>
        </form>
      );
    }

  3. Crea una función que acepte un evento de submit, luego pásala como handler de submit a tu formulario.

    En la función:

    • Llama a preventDefault() en el evento para sobrescribir el proceso de envío por defecto del navegador.
    • Crea un objeto FormData y envíalo en una petición POST 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>
            Name
            <input type="text" id="name" name="name" required />
          </label>
          <label>
            Email
            <input type="email" id="email" name="email" required />
          </label>
          <label>
            Message
            <textarea id="message" name="message" required />
          </label>
          <button>Send</button>
          {responseMessage && <p>{responseMessage}</p>}
        </form>
      );
    }

  4. Importa e incluye tu componente <FeedbackForm /> en una página. Asegúrate de usar una directiva client:* para asegurar que la lógica del formulario se hidrate cuando quieras que lo haga.

    src/pages/index.astro
    ---
    import FeedbackForm from "../components/FeedbackForm"
    ---
    <FeedbackForm client:load />
Contribuir Comunidad Patrocinar