Wie sende ich Formulardaten als „application/x-www-form-urlencoded' mit der Fetch-API?

Formulardaten mit der Fetch-API unter Verwendung von Application/x-www-form-urlencoded veröffentlichen

Beim Absenden eines Formulars stellt sich möglicherweise die Frage, wie die gesendet werden sollen Daten mithilfe der Fetch-API. Standardmäßig führt die Verwendung von FormData zum Senden des Textkörpers dazu, dass Daten als Multipart-/Formulardaten gesendet werden. Wenn Sie jedoch Daten als application/x-www-form-urlencoded senden möchten, stehen Ihnen einige Optionen zur Verfügung.

FormData mit Multipart/Form-Data-Format

FormData verwenden Sie werden automatisch daran gehindert, Daten im Multipart-/Formulardatenformat zu senden. Um dies zu vermeiden, können Sie manuell eine URL-codierte Zeichenfolge oder ein URLSearchParams-Objekt erstellen, anstatt FormData zu verwenden. Unten ist ein Codeausschnitt, der Formularelemente durchläuft und ein URLSearchParams-Objekt erstellt:

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

Hinweis: Sie müssen keinen Content-Type-Header explizit angeben.

URLSearchParams mit FormData

Eine weitere experimentelle Option besteht darin, ein URLSearchParams-Objekt zu erstellen und das FormData-Objekt direkt zu übergeben, anstatt Werte in einer Schleife zu durchlaufen:

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

Diese Methode verfügt zwar über einige experimentelle Unterstützung In Browsern wird empfohlen, vor der Verwendung gründlich zu testen.

Das obige ist der detaillierte Inhalt vonWie sende ich Formulardaten als „application/x-www-form-urlencoded' mit der Fetch-API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!