SvelteKit核心概念

表單操作

一個 +page.server.js 檔案可以匯出操作，讓您可以使用 <form> 元素將資料 POST 到伺服器。

當使用 <form> 時，客戶端 JavaScript 是可選的，但您可以輕鬆地使用 JavaScript 漸進式增強您的表單互動，以提供最佳的使用者體驗。

預設操作

在最簡單的情況下，頁面會宣告一個 default 操作

src/routes/login/+page.server

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    default: (event: any) => Promise<void>;
}@satisfies{import('./$types').Actions}actions = {
	default: (event: any) => Promise<void>default: async (event: anyevent) => {
		// TODO log the user in
	}
};

import type { type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}
type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const actions: {
    default: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<void>;
}actions = {
	default: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<void>default: async (event: Kit.RequestEvent<Record<string, any>, string | null>event) => {
		// TODO log the user in
	}
} satisfies type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}
type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

要從 /login 頁面呼叫此操作，只需新增一個 <form> - 無需 JavaScript

src/routes/login/+page

<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 請求將表單資料傳送到伺服器，執行預設操作。

操作總是使用 POST 請求，因為 GET 請求不應該有任何副作用。

我們也可以透過新增 action 屬性（指向該頁面）從其他頁面呼叫該操作（例如，如果根佈局中的導覽中有登入小工具）

src/routes/+layout

<form method="POST" action="/login">
	<!-- content -->
</form>

具名操作

一個頁面可以有多個具名操作，而不是只有一個 default 操作

src/routes/login/+page.server

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    login: (event: any) => Promise<void>;
    register: (event: any) => Promise<void>;
}@satisfies{import('./$types').Actions}actions = {
	default: async (event) => {
	login: (event: any) => Promise<void>login: async (event: anyevent) => {
		// TODO log the user in
	},
	register: (event: any) => Promise<void>register: async (event: anyevent) => {
		// TODO register the user
	}
};

import type { type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}
type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const actions: {
    login: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<void>;
    register: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<...>;
}actions = {
	default: async (event) => {
	login: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<void>login: async (event: Kit.RequestEvent<Record<string, any>, string | null>event) => {
		// TODO log the user in
	},
	register: (event: Kit.RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: Kit.RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
} satisfies type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}
type Actions = {
    [x: string]: Kit.Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

要呼叫具名操作，請新增一個以 / 字元為首碼的名稱的查詢參數

src/routes/login/+page

<form method="POST" action="?/register">

src/routes/+layout

<form method="POST" action="/login?/register">

除了 action 屬性之外，我們還可以在按鈕上使用 formaction 屬性，將相同的表單資料 POST 到與父 <form> 不同的操作

src/routes/login/+page

<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>

我們不能在具名操作旁邊有預設操作，因為如果您 POST 到一個沒有重新導向的具名操作，查詢參數會保留在 URL 中，這表示下一個預設 POST 會透過之前的具名操作。

操作的剖析

每個操作都會接收一個 RequestEvent 物件，讓您可以使用 request.formData() 讀取資料。在處理請求後（例如，透過設定 cookie 讓使用者登入），操作可以使用資料回應，這些資料將透過對應頁面上的 form 屬性以及整個應用程式中的 $page.form 提供，直到下一次更新。

src/routes/login/+page.server

import * as module "$lib/server/db"db from '$lib/server/db';

/** @type {import('./$types').PageServerLoad} */
export async function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>@type{import('./$types').PageServerLoad}load({ cookies: CookiesGet or set cookies related to the current request
cookies }) {
	const const user: anyuser = await module "$lib/server/db"db.getUserFromSession(cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.get(name: string, opts?: CookieParseOptions): string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));
	return { user: anyuser };
}

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{
        success: boolean;
    }>;
    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<...>;
}@satisfies{import('./$types').Actions}actions = {
	login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{
    success: boolean;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValue | nullemail);
		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
};

import * as module "$lib/server/db"db from '$lib/server/db';
import type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad, type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = async ({ cookies: CookiesGet or set cookies related to the current request
cookies }) => {
	const const user: anyuser = await module "$lib/server/db"db.getUserFromSession(cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.get(name: string, opts?: CookieParseOptions): string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));
	return { user: anyuser };
};

export const const actions: {
    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{
        success: boolean;
    }>;
    register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<...>;
}actions = {
	login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<{
    success: boolean;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValue | nullemail);
		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
} satisfies type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

src/routes/login/+page

<script>
	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
	let { data, form } = $props();
</script>

{#if form?.success}
	<!-- this message is ephemeral; it exists because the page was rendered in
	       response to a form submission. it will vanish if the user reloads -->
	<p>Successfully logged in! Welcome back, {data.user.name}</p>
{/if}

<script lang="ts">
	import type { PageData, ActionData } from './$types';

	let { data, form }: { data: PageData, form: ActionData } = $props();
</script>

{#if form?.success}
	<!-- this message is ephemeral; it exists because the page was rendered in
	       response to a form submission. it will vanish if the user reloads -->
	<p>Successfully logged in! Welcome back, {data.user.name}</p>
{/if}

傳統模式
在 Svelte 4 中，您會使用 export let data 和 export let form 來宣告屬性

驗證錯誤

如果由於資料無效而無法處理請求，您可以將驗證錯誤連同先前提交的表單值一起返回給使用者，以便他們可以再次嘗試。 fail 函數可讓您返回一個 HTTP 狀態碼（通常是 400 或 422，在驗證錯誤的情況下），以及資料。狀態碼可透過 $page.status 取得，資料可透過 form 取得

src/routes/login/+page.server

import { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.fail } from '@sveltejs/kit';
import * as module "$lib/server/db"db from '$lib/server/db';

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
        email: string | null;
        missing: boolean;
    }> | ActionFailure<{
        ...;
    }> | {
        ...;
    }>;
    register: (event: RequestEvent<...>) => Promise<...>;
}@satisfies{import('./$types').Actions}actions = {
	login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
    email: string | null;
    missing: boolean;
}> | ActionFailure<{
    email: FormDataEntryValue;
    incorrect: boolean;
}> | {
    ...;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		if (!const email: FormDataEntryValue | nullemail) {
			return fail<{
    email: string | null;
    missing: boolean;
}>(status: number, data: {
    email: string | null;
    missing: boolean;
}): ActionFailure<{
    email: string | null;
    missing: boolean;
}> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: string | nullemail, missing: booleanmissing: true });
		}

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValueemail);

		if (!const user: anyuser || const user: anyuser.password !== module "$lib/server/db"db.hash(const password: FormDataEntryValue | nullpassword)) {
			return fail<{
    email: FormDataEntryValue;
    incorrect: boolean;
}>(status: number, data: {
    email: FormDataEntryValue;
    incorrect: boolean;
}): ActionFailure<{
    email: FormDataEntryValue;
    incorrect: boolean;
}> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValueemail, incorrect: booleanincorrect: true });
		}

		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
};

import { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.fail } from '@sveltejs/kit';
import * as module "$lib/server/db"db from '$lib/server/db';
import type { type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const actions: {
    login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
        email: string | null;
        missing: boolean;
    }> | ActionFailure<{
        ...;
    }> | {
        ...;
    }>;
    register: (event: RequestEvent<...>) => Promise<...>;
}actions = {
	login: ({ cookies, request }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
    email: string | null;
    missing: boolean;
}> | ActionFailure<{
    email: FormDataEntryValue;
    incorrect: boolean;
}> | {
    ...;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		if (!const email: FormDataEntryValue | nullemail) {
			return fail<{
    email: string | null;
    missing: boolean;
}>(status: number, data: {
    email: string | null;
    missing: boolean;
}): ActionFailure<{
    email: string | null;
    missing: boolean;
}> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: string | nullemail, missing: booleanmissing: true });
		}

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValueemail);

		if (!const user: anyuser || const user: anyuser.password !== module "$lib/server/db"db.hash(const password: FormDataEntryValue | nullpassword)) {
			return fail<{
    email: FormDataEntryValue;
    incorrect: boolean;
}>(status: number, data: {
    email: FormDataEntryValue;
    incorrect: boolean;
}): ActionFailure<{
    email: FormDataEntryValue;
    incorrect: boolean;
}> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValueemail, incorrect: booleanincorrect: true });
		}

		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
} satisfies type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

請注意，為了預防起見，我們只將電子郵件返回到頁面，而不是密碼。

src/routes/login/+page

<form method="POST" action="?/login">
	{#if form?.missing}<p class="error">The email field is required</p>{/if}
	{#if form?.incorrect}<p class="error">Invalid credentials!</p>{/if}
	<label>
		Email
		<input name="email" type="email" value={form?.email ?? ''}>
	</label>
	<label>
		Password
		<input name="password" type="password">
	</label>
	<button>Log in</button>
	<button formaction="?/register">Register</button>
</form>

返回的資料必須可序列化為 JSON。除此之外，結構完全取決於您。例如，如果頁面上有多個表單，您可以使用 id 屬性或類似的屬性來區分返回的 form 資料是指哪個 <form>。

重新導向

重新導向（和錯誤）的工作方式與 load 中完全相同

src/routes/login/+page.server

import { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.fail, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect } from '@sveltejs/kit';
import * as module "$lib/server/db"db from '$lib/server/db';

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
        email: FormDataEntryValue | null;
        missing: boolean;
    }> | ActionFailure<...> | {
        ...;
    }>;
    register: (event: RequestEvent<...>) => Promise<...>;
}@satisfies{import('./$types').Actions}actions = {
	login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
    email: FormDataEntryValue | null;
    missing: boolean;
}> | ActionFailure<...> | {
    ...;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request, url: URLThe requested URL.
url }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValue | nullemail);
		if (!const user: anyuser) {
			return fail<{
    email: FormDataEntryValue | null;
    missing: boolean;
}>(status: number, data: {
    email: FormDataEntryValue | null;
    missing: boolean;
}): ActionFailure<...> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValue | nullemail, missing: booleanmissing: true });
		}

		if (const user: anyuser.password !== module "$lib/server/db"db.hash(const password: FormDataEntryValue | nullpassword)) {
			return fail<{
    email: FormDataEntryValue | null;
    incorrect: boolean;
}>(status: number, data: {
    email: FormDataEntryValue | null;
    incorrect: boolean;
}): ActionFailure<...> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValue | nullemail, incorrect: booleanincorrect: true });
		}

		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		if (url: URLThe requested URL.
url.URL.searchParams: URLSearchParamsMDN Reference
searchParams.URLSearchParams.has(name: string, value?: string): booleanReturns a Boolean indicating if such a search parameter exists.
MDN Reference
has('redirectTo')) {
			function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect(303, url: URLThe requested URL.
url.URL.searchParams: URLSearchParamsMDN Reference
searchParams.URLSearchParams.get(name: string): string | nullReturns the first value associated to the given search parameter.
MDN Reference
get('redirectTo'));
		}

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
};

import { function fail(status: number): ActionFailure<undefined> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.fail, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect } from '@sveltejs/kit';
import * as module "$lib/server/db"db from '$lib/server/db';
import type { type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const actions: {
    login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
        email: FormDataEntryValue | null;
        missing: boolean;
    }> | ActionFailure<...> | {
        ...;
    }>;
    register: (event: RequestEvent<...>) => Promise<...>;
}actions = {
	login: ({ cookies, request, url }: RequestEvent<Record<string, any>, string | null>) => Promise<ActionFailure<{
    email: FormDataEntryValue | null;
    missing: boolean;
}> | ActionFailure<...> | {
    ...;
}>login: async ({ cookies: CookiesGet or set cookies related to the current request
cookies, request: RequestThe original request object
request, url: URLThe requested URL.
url }) => {
		const const data: FormDatadata = await request: RequestThe original request object
request.Body.formData(): Promise<FormData>MDN Reference
formData();
		const const email: FormDataEntryValue | nullemail = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('email');
		const const password: FormDataEntryValue | nullpassword = const data: FormDatadata.FormData.get(name: string): FormDataEntryValue | nullMDN Reference
get('password');

		const const user: anyuser = await module "$lib/server/db"db.getUser(const email: FormDataEntryValue | nullemail);
		if (!const user: anyuser) {
			return fail<{
    email: FormDataEntryValue | null;
    missing: boolean;
}>(status: number, data: {
    email: FormDataEntryValue | null;
    missing: boolean;
}): ActionFailure<...> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValue | nullemail, missing: booleanmissing: true });
		}

		if (const user: anyuser.password !== module "$lib/server/db"db.hash(const password: FormDataEntryValue | nullpassword)) {
			return fail<{
    email: FormDataEntryValue | null;
    incorrect: boolean;
}>(status: number, data: {
    email: FormDataEntryValue | null;
    incorrect: boolean;
}): ActionFailure<...> (+1 overload)Create an ActionFailure object.
@paramstatus The HTTP status code. Must be in the range 400-599.
@paramdata Data associated with the failure (e.g. validation errors)fail(400, { email: FormDataEntryValue | nullemail, incorrect: booleanincorrect: true });
		}

		cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.set(name: string, value: string, opts: CookieSerializeOptions & {
    path: string;
}): voidSets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly and secure options are true by default (except on https://127.0.0.1, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramvalue the cookie value
@paramopts the options, passed directly to cookie.serialize. See documentation hereset('sessionid', await module "$lib/server/db"db.createSession(const user: anyuser), { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });

		if (url: URLThe requested URL.
url.URL.searchParams: URLSearchParamsMDN Reference
searchParams.URLSearchParams.has(name: string, value?: string): booleanReturns a Boolean indicating if such a search parameter exists.
MDN Reference
has('redirectTo')) {
			function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): neverRedirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect(303, url.searchParams.get('redirectTo'));
		}

		return { success: booleansuccess: true };
	},
	register: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>register: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		// TODO register the user
	}
} satisfies type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

載入資料

操作執行後，頁面將重新呈現（除非發生重新導向或意外錯誤），操作的回傳值將作為 form 屬性提供給頁面。這表示您頁面的 load 函數將在操作完成後執行。

請注意，handle 在呼叫操作之前執行，並且不會在 load 函數之前重新執行。這表示，例如，如果您使用 handle 來根據 cookie 填入 event.locals，您必須在操作中設定或刪除 cookie 時更新 event.locals

src/hooks.server

/** @type {import('@sveltejs/kit').Handle} */
export async function function handle(input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}): MaybePromise<...>@type{import('@sveltejs/kit').Handle}handle({ event: RequestEvent<Partial<Record<string, string>>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) {
	event: RequestEvent<Partial<Record<string, string>>, string | null>event.RequestEvent<Partial<Record<string, string>>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser = await function getUser(sessionid: string | undefined): {
    name: string;
}getUser(event: RequestEvent<Partial<Record<string, string>>, string | null>event.RequestEvent<Partial<Record<string, string>>, string | null>.cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.get(name: string, opts?: CookieParseOptions): string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));
	return resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>event);
}

import type { type Handle = (input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<...>The handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
Handle } from '@sveltejs/kit';

export const const handle: Handlehandle: type Handle = (input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
}) => MaybePromise<...>The handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
Handle = async ({ event: RequestEvent<Partial<Record<string, string>>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {
	event: RequestEvent<Partial<Record<string, string>>, string | null>event.RequestEvent<Partial<Record<string, string>>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser = await function getUser(sessionid: string | undefined): {
    name: string;
}getUser(event: RequestEvent<Partial<Record<string, string>>, string | null>event.RequestEvent<Partial<Record<string, string>>, string | null>.cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.get(name: string, opts?: CookieParseOptions): string | undefinedGets a cookie that was previously set with cookies.set, or from the request headers.
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.parse. See documentation hereget('sessionid'));
	return resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>event);
};

src/routes/account/+page.server

/** @type {import('./$types').PageServerLoad} */
export function function load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>@type{import('./$types').PageServerLoad}load(event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event) {
	return {
		user: {
    name: string;
} | nulluser: event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser
	};
}

/** @satisfies {import('./$types').Actions} */
export const const actions: {
    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;
}@satisfies{import('./$types').Actions}actions = {
	logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>logout: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.delete(name: string, opts: CookieSerializeOptions & {
    path: string;
}): voidDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.serialize. The path must match the path of the cookie you want to delete. See documentation heredelete('sessionid', { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });
		event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Params extends Partial<Record<string, string>> = Partial<Record<string, string>>, RouteId extends string | null = string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser = null;
	}
};

import type { type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad, type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions } from './$types';

export const const load: PageServerLoadload: type PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageServerLoad = (event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event) => {
	return {
		user: {
    name: string;
} | nulluser: event: ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser
	};
};

export const const actions: {
    logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>;
}actions = {
	logout: (event: RequestEvent<Record<string, any>, string | null>) => Promise<void>logout: async (event: RequestEvent<Record<string, any>, string | null>event) => {
		event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.cookies: CookiesGet or set cookies related to the current request
cookies.Cookies.delete(name: string, opts: CookieSerializeOptions & {
    path: string;
}): voidDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.
You must specify a path for the cookie. In most cases you should explicitly set path: '/' to make the cookie available throughout your app. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children
@paramname the name of the cookie
@paramopts the options, passed directly to cookie.serialize. The path must match the path of the cookie you want to delete. See documentation heredelete('sessionid', { path: stringSpecifies the value for the 
{@link 
https://tools.ietf.org/html/rfc6265#section-5.2.4 Path Set-Cookie attribute
}
.
By default, the path is considered the “default path”.
path: '/' });
		event: RequestEvent<Record<string, any>, string | null>event.RequestEvent<Params extends Partial<Record<string, string>> = Partial<Record<string, string>>, RouteId extends string | null = string | null>.locals: App.LocalsContains custom data that was added to the request within the server handle hook.
locals.App.Locals.user: {
    name: string;
} | nulluser = null;
	}
} satisfies type Actions = {
    [x: string]: Action<Record<string, any>, void | Record<string, any>, string | null>;
}Actions;

漸進式增強

在前面的章節中，我們建構了一個 /login 操作，該操作無需客戶端 JavaScript 即可運作 - 看不到任何 fetch。這很好，但是當 JavaScript 可用時，我們可以漸進式增強表單互動，以提供更好的使用者體驗。

use:enhance

漸進式增強表單最簡單的方法是新增 use:enhance 操作

src/routes/login/+page

<script>
	import { enhance } from '$app/forms';

	/** @type {{ form: import('./$types').ActionData }} */
	let { form } = $props();
</script>

<form method="POST" use:enhance>

<script lang="ts">
	import { enhance } from '$app/forms';
	import type { ActionData } from './$types';

	let { form }: { form: ActionData } = $props();
</script>

<form method="POST" use:enhance>

use:enhance 只能與具有 method="POST" 的表單一起使用。它不適用於 method="GET"，這是未指定方法的表單的預設值。嘗試在沒有 method="POST" 的表單上使用 use:enhance 會導致錯誤。

是的，enhance 操作和 <form action> 都稱為「操作」有點令人困惑。這些文件內容很豐富。抱歉。

在沒有引數的情況下，use:enhance 將模擬瀏覽器原生行為，只是沒有完整頁面重新載入。它會

在成功或無效的回應時更新 form 屬性、$page.form 和 $page.status，但僅當操作與您提交的頁面相同時。例如，如果您的表單看起來像 <form action="/somewhere/else" ..>，則 form 和 $page 將不會更新。這是因為在本機表單提交案例中，您會被重新導向到操作所在的頁面。如果您想要以任何方式更新它們，請使用 applyAction
重設 <form> 元素
在成功的回應時使用 invalidateAll 使所有資料無效
在重新導向回應時呼叫 goto
如果發生錯誤，則呈現最近的 +error 邊界
將焦點重設到適當的元素

自訂 use:enhance

若要自訂行為，您可以提供一個 SubmitFunction，該函數會在提交表單之前立即執行，並且（可選）會傳回一個使用 ActionResult 執行的回呼。請注意，如果您傳回回呼，則不會觸發上述預設行為。要使其恢復，請呼叫 update。

<form
	method="POST"
	use:enhance={({ formElement, formData, action, cancel, submitter }) => {
		// `formElement` is this `<form>` element
		// `formData` is its `FormData` object that's about to be submitted
		// `action` is the URL to which the form is posted
		// calling `cancel()` will prevent the submission
		// `submitter` is the `HTMLElement` that caused the form to be submitted

		return async ({ result, update }) => {
			// `result` is an `ActionResult` object
			// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
		};
	}}
>

您可以使用這些函數來顯示和隱藏載入 UI 等。

如果您傳回回呼，您可能需要重現預設 use:enhance 行為的部分，但不會使成功回應上的所有資料無效。您可以使用 applyAction 來執行此操作

src/routes/login/+page

<script>
	import { enhance, applyAction } from '$app/forms';

	/** @type {{ form: import('./$types').ActionData }} */
	let { form } = $props();
</script>

<form
	method="POST"
	use:enhance={({ formElement, formData, action, cancel }) => {
		return async ({ result }) => {
			// `result` is an `ActionResult` object
			if (result.type === 'redirect') {
				goto(result.location);
			} else {
				await applyAction(result);
			}
		};
	}}
>

<script lang="ts">
	import { enhance, applyAction } from '$app/forms';
	import type { ActionData } from './$types';

	let { form }: { form: ActionData } = $props();
</script>

<form
	method="POST"
	use:enhance={({ formElement, formData, action, cancel }) => {
		return async ({ result }) => {
			// `result` is an `ActionResult` object
			if (result.type === 'redirect') {
				goto(result.location);
			} else {
				await applyAction(result);
			}
		};
	}}
>

applyAction(result) 的行為取決於 result.type

success、failure - 將 $page.status 設定為 result.status，並將 form 和 $page.form 更新為 result.data（無論您從何處提交，與 enhance 中的 update 相反）
redirect - 呼叫 goto(result.location, { invalidateAll: true })
error - 使用 result.error 呈現最近的 +error 邊界

在所有情況下，焦點都會重設。

自訂事件接聽器

我們也可以自行實作漸進式增強，而無需 use:enhance，只需在 <form> 上使用一般事件接聽器

src/routes/login/+page

<script>
	import { invalidateAll, goto } from '$app/navigation';
	import { applyAction, deserialize } from '$app/forms';

	/** @type {{ form: import('./$types').ActionData }} */
	let { form } = $props();

	/** @param {{ currentTarget: EventTarget & HTMLFormElement}} event */
	async function handleSubmit(event) {
		const data = new FormData(event.currentTarget);

		const response = await fetch(event.currentTarget.action, {
			method: 'POST',
			body: data
		});

		/** @type {import('@sveltejs/kit').ActionResult} */
		const result = deserialize(await response.text());

		if (result.type === 'success') {
			// rerun all `load` functions, following the successful update
			await invalidateAll();
		}

		applyAction(result);
	}
</script>

<form method="POST" onsubmit|preventDefault={handleSubmit}>
	<!-- content -->
</form>

<script lang="ts">
	import { invalidateAll, goto } from '$app/navigation';
	import { applyAction, deserialize } from '$app/forms';
	import type { ActionData } from './$types';
	import type { ActionResult } from '@sveltejs/kit';

	let { form }: { form: ActionData } = $props();

	async function handleSubmit(event: { currentTarget: EventTarget & HTMLFormElement}) {
		const data = new FormData(event.currentTarget);

		const response = await fetch(event.currentTarget.action, {
			method: 'POST',
			body: data
		});

		const result: ActionResult = deserialize(await response.text());

		if (result.type === 'success') {
			// rerun all `load` functions, following the successful update
			await invalidateAll();
		}

		applyAction(result);
	}
</script>

<form method="POST" onsubmit|preventDefault={handleSubmit}>
	<!-- content -->
</form>

請注意，您需要使用 $app/forms 中的對應方法來 deserialize 回應，然後再進一步處理它。JSON.parse() 並不夠，因為表單操作（如 load 函數）也支援返回 Date 或 BigInt 物件。

如果您的 +page.server.js 旁邊有 +server.js，則 fetch 請求預設會路由到那裡。若要改為 POST 到 +page.server.js 中的操作，請使用自訂 x-sveltekit-action 標頭

const const response: Responseresponse = await function fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference
fetch(this.action, {
	RequestInit.method?: string | undefinedA string to set request’s method.
method: 'POST',
	RequestInit.body?: BodyInit | null | undefinedA BodyInit object or null to set request’s body.
body: data,
	RequestInit.headers?: HeadersInit | undefinedA Headers object, an object literal, or an array of two-item arrays to set request’s headers.
headers: {
		'x-sveltekit-action': 'true'
	}
});

替代方案

表單操作是將資料傳送到伺服器的慣用方法，因為它們可以漸進式增強，但您也可以使用 +server.js 檔案來公開（例如）JSON API。以下是這種互動可能看起來的樣子

src/routes/send-message/+page

<script>
	function rerun() {
		fetch('/api/ci', {
			method: 'POST'
		});
	}
</script>

<button onclick={rerun}>Rerun CI</button>

src/routes/api/ci/+server

/** @type {import('./$types').RequestHandler} */
export function function POST(): void@type{import('./$types').RequestHandler}POST() {
	// do something
}

import type { type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler } from './$types';
export const const POST: RequestHandlerPOST: type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>RequestHandler = () => {
	// do something
};

GET vs POST

如我們所見，若要呼叫表單操作，您必須使用 method="POST"。

某些表單不需要將資料 POST 到伺服器 - 例如搜尋輸入。對於這些，您可以使用 method="GET"（或等效地，完全沒有 method），SvelteKit 會將它們視為 <a> 元素，使用用戶端路由器而不是完整頁面導覽

<form action="/search">
	<label>
		Search
		<input name="q">
	</label>
</form>

提交此表單將導覽至 /search?q=... 並呼叫您的載入函數，但不會呼叫操作。與 <a> 元素一樣，您可以在 <form> 上設定 data-sveltekit-reload、data-sveltekit-replacestate、data-sveltekit-keepfocus 和 data-sveltekit-noscroll 屬性，以控制路由器的行為。

預設操作

具名操作

操作的剖析

驗證錯誤

重新導向

載入資料

漸進式增強

use:enhance

自訂 use:enhance

自訂事件接聽器

替代方案

GET vs POST

延伸閱讀