$app/forms
import { function applyAction<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: import("@sveltejs/kit").ActionResult<Success, Failure>): Promise<void>
This action updates the form
property of the current page with the given data and updates page.status
.
In case of an error, it redirects to the nearest error page.
applyAction, function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import("@sveltejs/kit").ActionResult<Success, Failure>
Use this function to deserialize the response from a form submission.
Usage:
import { deserialize } from '$app/forms';
async function handleSubmit(event) {
const response = await fetch('/form?/action', {
method: 'POST',
body: new FormData(event.target)
});
const result = deserialize(await response.text());
// ...
}
deserialize, function enhance<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(form_element: HTMLFormElement, submit?: import("@sveltejs/kit").SubmitFunction<Success, Failure>): {
destroy(): void;
}
This action enhances a <form>
element that otherwise would work without JavaScript.
The submit
function is called upon submission with the given FormData and the action
that should be triggered.
If cancel
is called, the form will not be submitted.
You can use the abort controller
to cancel the submission in case another one starts.
If a function is returned, that function is called with the response from the server.
If nothing is returned, the fallback will be used.
If this function or its return value isn’t set, it
- falls back to updating the
form
prop with the returned data if the action is on the same page as the form
- updates
page.status
- resets the
<form>
element and invalidates all data in case of successful submission with no redirect response
- redirects in case of a redirect response
- redirects to the nearest error page in case of an unexpected error
If you provide a custom function with a callback and want to use the default behavior, invoke update
in your callback.
enhance } from '$app/forms';
applyAction
此 action 使用给定数据更新当前页面的 form
属性并更新 page.status
。如果出现错误,它会重定向到最近的错误页面。
function applyAction<
Success extends Record<string, unknown> | undefined,
Failure extends Record<string, unknown> | undefined
>(
result: import('@sveltejs/kit').ActionResult<
Success,
Failure
>
): Promise<void>;
deserialize
使用此函数来反序列化表单提交的响应。用法:
import { function deserialize<Success extends Record<string, unknown> | undefined, Failure extends Record<string, unknown> | undefined>(result: string): import("@sveltejs/kit").ActionResult<Success, Failure>
Use this function to deserialize the response from a form submission.
Usage:
import { deserialize } from '$app/forms';
async function handleSubmit(event) {
const response = await fetch('/form?/action', {
method: 'POST',
body: new FormData(event.target)
});
const result = deserialize(await response.text());
// ...
}
deserialize } from '$app/forms';
async function function handleSubmit(event: any): Promise<void>
handleSubmit(event: any
event) {
const const response: Response
response = await function fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> (+1 overload)
fetch('/form?/action', {
RequestInit.method?: string | undefined
A string to set request’s method.
method: 'POST',
RequestInit.body?: BodyInit | null | undefined
A BodyInit object or null to set request’s body.
body: new var FormData: new (form?: HTMLFormElement, submitter?: HTMLElement | null) => FormData
Provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.
FormData(event: any
event.target)
});
const const result: ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>
result = deserialize<Record<string, unknown> | undefined, Record<string, unknown> | undefined>(result: string): ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>
Use this function to deserialize the response from a form submission.
Usage:
import { deserialize } from '$app/forms';
async function handleSubmit(event) {
const response = await fetch('/form?/action', {
method: 'POST',
body: new FormData(event.target)
});
const result = deserialize(await response.text());
// ...
}
deserialize(await const response: Response
response.Body.text(): Promise<string>
text());
// ...
}
function deserialize<
Success extends Record<string, unknown> | undefined,
Failure extends Record<string, unknown> | undefined
>(
result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;
enhance
此 action 增强了一个原本无需 JavaScript 就能工作的 <form>
元素。
submit
函数在提交时会被调用,传入给定的 FormData 和应该触发的 action
。如果调用 cancel
,表单将不会被提交。
您可以使用 abort controller
在另一个提交开始时取消当前提交。
如果返回一个函数,则该函数将被调用,并传入来自服务端的响应。如果没有返回任何内容,将使用后备处理。
如果未设置此函数或其返回值,它将:
- 如果 action 与表单在相同的页面上,则回退到使用返回的数据更新
form
prop - 更新
page.status
- 重置
<form>
元素并在成功提交且没有重定向响应的情况下使所有数据失效。 - 在有重定向响应的情况下进行重定向
- 在出现意外错误时重定向到最近的错误页面
如果您提供了带有回调的自定义函数并想使用默认行为,请在回调中调用 update
。
function enhance<
Success extends Record<string, unknown> | undefined,
Failure extends Record<string, unknown> | undefined
>(
form_element: HTMLFormElement,
submit?: import('@sveltejs/kit').SubmitFunction<
Success,
Failure
>
): {
destroy(): void;
};