Formulardaten mit der Fetch-API veröffentlichen

Bei der Verwendung der Fetch-API zum Senden von Formulardaten sind zwei Hauptformate zu berücksichtigen:

Mehrteilig/ Form-Data

Wenn Sie FormData zum Erstellen des Anforderungstexts verwenden, werden die Daten automatisch im Multipart-/Formulardatenformat gesendet. Dies ist ein Standardverhalten von FormData und kann nicht geändert werden.

Application/x-www-form-urlencoded

Um die Daten im application/x-www-form-urlencoded-Format zu senden, müssen Sie haben ein paar Optionen:

1. URL-kodierte Zeichenfolge:

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

2. URLSearchParams-Objekt:

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

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

Beachten Sie, dass die Angabe des Content-Type-Headers bei Verwendung von URLSearchParams nicht erforderlich ist, da dadurch automatisch der richtige Inhaltstyp festgelegt wird.

3. URLSearchParams from FormData:

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

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

Mit dieser Option können Sie das FormData-Objekt direkt übergeben, um das URLSearchParams-Objekt zu erstellen. Es kann jedoch sein, dass die Browserunterstützung eingeschränkt ist. Testen Sie es daher gründlich, bevor Sie es verwenden.