跳转到内容

使用 API 路由构建表单

HTML 表单会导致浏览器刷新页面或导航到新页面。要将表单数据发送到 API 端点，你必须使用 JavaScript 拦截表单提交。

本指南将向你展示如何将表单数据发送到 API 端点并处理这些数据。

先决条件

“先决条件”部分

方案

“指南”部分

  1. 在 /api/feedback 创建一个 POST API 端点，用于接收表单数据。使用 request.formData() 来处理它。在使用表单值之前，请务必对其进行验证。

    此示例将一个包含消息的 JSON 对象发送回客户端。

    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. 使用你的 UI 框架创建一个表单组件。每个输入框都应有一个描述其值的 name 属性。

    请确保包含一个 <button> 或 <input type="submit"> 元素来提交表单。

    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. 创建一个接受提交事件的函数，然后将其作为 submit 事件处理程序传递给你的表单。

    在函数中

    • 在事件上调用 preventDefault() 以覆盖浏览器的默认提交过程。
    • 创建一个 FormData 对象，并使用 fetch() 将其以 POST 请求发送到你的端点。
    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. 导入并在页面中包含你的 <FeedbackForm /> 组件。请确保使用 client:* 指令，以在你需要时确保表单逻辑被激活（hydrated）。

    src/pages/index.astro
    ---
    import FeedbackForm from "../components/FeedbackForm"
    ---
    <FeedbackForm client:load />
贡献 社区 赞助