SvelteKit 最新中文文档教程（4）—— 表单 actions

最新推荐文章于 2025-11-06 11:47:37 发布

原创

最新推荐文章于 2025-11-06 11:47:37 发布 · 817 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #前端框架 #vue.js #react.js #svelte #sveltekit

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

表单 actions

+page.server.js 文件可以导出 actions，允许您使用 <form> 元素向服务端 POST 数据。

使用 <form> 时，客户端 JavaScript 是可选的，但您可以轻松地使用 JavaScript 渐进式增强 表单交互，以提供最佳的用户体验。

默认 action

在最简单的情况下，一个页面声明一个 default action：

/// file: src/routes/login/+page.server.js
/** @satisfies {import('./$types').Actions} */
export const actions = {
   
   
	default: async (event) => {
   
   
		// TODO log the user in
	}
};

要从 /login 页面调用此 action，只需添加一个 <form> —— 不需要 JavaScript：

<!--- file: src/routes/login/+page.svelte --->
<form method="POST">
  <label>
    Email
    <input name="email" type="email">
  </label>
  <label>
    Password
    <input name="password" type="password">
  </label>
  <button>Log in</button>
</form>

如果有人点击按钮，浏览器将通过 POST 请求将表单数据发送到服务端，运行默认 action。

[!NOTE] action 总是使用 POST 请求，因为 GET 请求不应该有副作用。

我们还可以通过添加 action 属性，调用来自其他页面的 action （例如，如果根布局中的导航栏有一个登录小部件）：

/// file: src/routes/+layout.svelte
<form method="POST" action="/login">
	<!-- content -->
</form>

命名 actions

页面可以根据需要拥有多个命名 action ，而不是只有一个 default action：

/// file: src/routes/login/+page.server.js
/** @satisfies {import('./$types').Actions} */
export const actions = {
   
   
---	default: async (event) => {
   
   ---
+++	login: async (event) => {
   
   +++
    // TODO log the user in
  },
+++	register: async (event) => {
   
   
    // TODO register the user
  }+++
};

要调用命名 action ，添加一个以 / 字符为前缀的查询参数：

<!--- file: src/routes/login/+page.svelte --->
<form method="POST" action="?/register">

<!--- file: src/routes/+layout.svelte --->
<form method="POST" action="/https/blog.csdn.net/login?/register">

除了 action 属性，我们还可以在按钮上使用 formaction 属性，将相同的表单数据 POST 到与父 <form> 不同的 action ：

/// file: src/routes/login/+page.svelte
<form method="POST" +++action="?/login"+++>
  <label>
    Email
    <input name="email" type="email">
  </label>
  <label>
    Password
    <input name="password" type="password">
  </label>
  <button>Log in</button>
  +++<button formaction="?/register">Register</button>+++
</form>

[!NOTE] 我们不能在命名 action 旁边有默认 action ，因为如果您在没有重定向的情况下 POST 到命名 action ，查询参数会保留在 URL 中，这意味着下一个默认 POST 将通过之前的命名 action 进行处理。

action 的结构

每个 action 接收一个 RequestEvent 对象，允许您使用 request.formData() 读取数据。在处理请求之后（例如，通过设置 cookie 让用户登录），action 可以响应数据，这些数据将在对应页面的 form 属性以及整个应用范围的 page.form 中可用，直到下一次更新。

/// file: src/routes/login/+page.server.js
// @filename: ambient.d.ts
declare module '$lib/server/db';

// @filename: index.js
// ---cut---
import * as db from '$lib/server/db';

/** @type {import('./$types').PageServerLoad} */
export async function load({
    
     cookies }) {
   
   
  const user = await db.getUserFromSession(cookies.get('sessionid'));
  return {
   
    user };
}

/** @satisfies {import('./$types').Actions} */
export const actions = {