首頁 > web前端 > js教程 > 如何使用 Fetch API 以不同格式傳送表單資料?

如何使用 Fetch API 以不同格式傳送表單資料?

Susan Sarandon
發布: 2024-11-03 03:43:31
原創
746 人瀏覽過

How do you send form data with Fetch API in different formats?

使用Fetch API 發佈表單資料

使用Fetch API 提交表單資料時,需要考慮兩種主要格式:

Multipart/ Form-Data

使用FormData建構請求體時,資料會自動以multipart/form-data格式傳送。這是 FormData 的預設行為,無法修改。

Application/x-www-form-urlencoded

要以application/x-www-form-urlencoded 格式發送數據,您有幾個選項:

1。 URL 編碼字串:

<code class="javascript">fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});</code>
登入後複製

2. URLSearchParams 物件:

<code class="javascript">const data = new URLSearchParams();
data.append("email", "example@email.com");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>
登入後複製

請注意,使用URLSearchParams 時無須指定標頭,因為它會自動設定正確的內容類型。

3.來自 FormData 的 URLSearchParams:

<code class="javascript">const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>
登入後複製

此選項可讓您直接傳遞 FormData 物件來建立 URLSearchParams 物件。但是,它的瀏覽器支援可能有限,因此請務必在使用之前對其進行徹底測試。

以上是如何使用 Fetch API 以不同格式傳送表單資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板