SvelteKitReference

$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 &#x3C;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 &#x3C;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.
It accepts an options object

reset: false if you don’t want the &#x3C;form> values to be reset after a successful submission
invalidateAll: false if you don’t want the action to call invalidateAll after submission

@paramform_element The form element
@paramsubmit Submit callbackenhance } from '$app/forms';

应用动作

此操作使用给定数据更新当前页面的 表单 属性和更新 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>;

反序列化

使用此函数反序列化表单提交的响应。用法：

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: anyevent) {
	const const response: Responseresponse = await function fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> (+1 overload)MDN Reference
fetch('/form?/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: new var FormData: new (form?: HTMLFormElement, submitter?: HTMLElement | null) => FormDataProvides 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”.
MDN Reference
FormData(event: anyevent.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: Responseresponse.Body.text(): Promise<string>MDN Reference
text());
	// ...
}

function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

增强

此操作增强了一个<form>元素，否则该元素在没有 JavaScript 的情况下也能正常工作。

提交时，将使用给定的 FormData 和应触发的action调用submit函数。如果调用cancel，则表单将不会提交。如果另一个开始，可以使用 abort controller取消提交。如果返回一个函数，则该函数将使用来自服务器的响应被调用。如果没有返回任何内容，将使用回退方案。

如果此函数或其返回值未设置，则

回退到更新同一页面上表单的 prop，如果操作在该表单页面上
更新 page.status
重置 <form> 元素，并在无重定向响应的成功提交情况下使所有数据无效
重定向情况下的重定向响应
重定向到最近的错误页面，以处理意外错误

如果您提供了一个带有回调的自定义函数并希望使用默认行为，请在您的回调中调用update。它接受一个选项对象

重置：否如果您不希望在成功提交后重置 <form> 的值
invalidateAll: false 如果您不想在提交后调用 invalidateAll

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

Edit this page on GitHub llms.txt

previous next

$app/environment $app/navigation