使用Fetch API 發布表單資料

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

Multipart/ Form-Data

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

Application/x-www-form-urlencoded

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

1。 URL 編碼字串：

fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});

2. URLSearchParams 物件：

const data = new URLSearchParams();
data.append("email", "[email protected]");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});

請注意，使用 URLSearchParams 時無需指定 Content-Type 標頭，因為它會自動設定正確的內容類型。

3.來自 FormData 的 URLSearchParams：

const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});

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