使用 API 路由构建表单

一个 HTML 表单会导致浏览器刷新页面或跳转到新页面。为了将表单数据发送到 API 端点，就必须要使用 JavaScript 拦截提交的表单。

本节示例向你展示了如何发送表单数据到一个 API 端点，并处理这些数据。

• 一个开启了 SSR （output: ‘server’） 模式的项目
• 安装一个集成的 UI 框架

1. 使用你的 UI 框架创建一个表单组件。每个输入字段都应该有一个描述该输入值的 name 属性。

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

   PreactReactSolidSvelteVue

   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>
     );
   }

2. 创建一个 post API 端点，用于接收表单数据。使用 request.formData() 处理表单数据。但在你使用表单值之前，请确保对其进行必要的校验。

   在这个示例中会向客户端发送一个包含响应消息的 JSON 对象。

   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");
     // 你可能需要尽可能多地做有关数据校验的步骤
     if (!name || !email || !message) {
       return new Response(
         JSON.stringify({
           message: "Missing required fields",
         }),
         { status: 400 }
       );
     }
     // 这里你可能会与数据进行交互，然后返回一个成功的响应
     return new Response(
       JSON.stringify({
         message: "Success!"
       }),
       { status: 200 }
     );
   };

3. 创建一个函数以接受提交事件（submit event），然后将其作为 submit 事件处理器传递给你的表单。在函数中，调用事件的 preventDefault 方法，以覆盖浏览器的默认提交过程。

   接下来，创建一个 FormData 对象，并使用 fetch 将其发送到你的端点。

   PreactReactSolidSvelteVue

   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>
     );
   }

更多方案