Работа с формами через API-маршруты

Стандартные HTML-формы вызывают перезагрузку страницы при отправке. Чтобы отправить данные без перезагрузки на API-эндпойнт, необходимо перехватить событие отправки с помощью JavaScript.

Предварительные требования

• Проект с установленным адаптером для SSR
• Установленная интеграция любого UI-фреймворка

Инструкция

1. Создайте API-эндпойнт POST по адресу /api/feedback, который будет принимать данные формы. Используйте request.formData() для их обработки.

   src/pages/api/feedback.ts

   export const prerender = false;
   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");
   
     if (!name || !email) {
       return new Response(JSON.stringify({ message: "Заполните все поля" }), { status: 400 });
     }
   
     return new Response(JSON.stringify({ message: "Успешно!" }), { status: 200 });
   };

2. Создайте компонент формы на вашем любимом фреймворке.

   React

   src/components/FeedbackForm.tsx

   import { useState, FormEvent } from "react";
   
   export default function Form() {
     const [responseMessage, setResponseMessage] = useState("");
   
     async function submit(e: FormEvent<HTMLFormElement>) {
       e.preventDefault();
       const formData = new FormData(e.currentTarget);
       const response = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const data = await response.json();
       setResponseMessage(data.message);
     }
   
     return (
       <form onSubmit={submit}>
         <input type="text" name="name" required placeholder="Имя" />
         <input type="email" name="email" required placeholder="Email" />
         <button>Отправить</button>
         {responseMessage && <p>{responseMessage}</p>}
       </form>
     );
   }

   Svelte

   src/components/FeedbackForm.svelte

   <script lang="ts">
     let responseMessage: string;
   
     async function submit(e: SubmitEvent) {
       e.preventDefault();
       const formData = new FormData(e.currentTarget as HTMLFormElement);
       const response = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const data = await response.json();
       responseMessage = data.message;
     }
   </script>
   
   <form on:submit={submit}>
     <input type="text" name="name" required />
     <input type="email" name="email" required />
     <button>Отправить</button>
     {#if responseMessage}<p>{responseMessage}</p>{/if}
   </form>

3. Добавьте компонент на страницу и не забудьте указать директиву client:load для гидратации.

   ---
   import FeedbackForm from "../components/FeedbackForm";
   ---
   <FeedbackForm client:load />