跳至主要內容

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

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

applyAction

此操作會使用給定的資料更新目前頁面的 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: anyevent) { const const response: Responseresponse = 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”.

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>text());
// ... }
function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

enhance

此操作會增強 <form> 元素,否則它在沒有 JavaScript 的情況下也能運作。

在提交時,會使用給定的 FormData 和應該觸發的 action 呼叫 submit 函式。如果呼叫 cancel,則不會提交表單。您可以使用中止 controller 來取消提交,以防另一個提交開始。如果傳回一個函式,則會在收到來自伺服器的回應時呼叫該函式。如果沒有傳回任何內容,則會使用後備方案。

如果未設定此函式或其傳回值,則會

  • 如果操作與表單在同一頁面上,則後備為使用傳回的資料更新 form 屬性
  • 更新 $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;
};

在 GitHub 上編輯此頁面

上一頁 下一頁