Wie senden Sie Formulardaten mit der Fetch-API in verschiedenen Formaten?

Formulardaten mit der Fetch-API veröffentlichen

Bei der Verwendung der Fetch-API zum Übermitteln 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 Format application/x-www-form-urlencoded zu senden, müssen Sie haben ein paar Möglichkeiten:

1. URL-kodierte Zeichenfolge:

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

2. URLSearchParams-Objekt:

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

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 von FormData:

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

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

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.

Das obige ist der detaillierte Inhalt vonWie senden Sie Formulardaten mit der Fetch-API in verschiedenen Formaten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!