Maison > interface Web > js tutoriel > Comment envoyer des données de formulaire avec l'API Fetch dans différents formats ?

Comment envoyer des données de formulaire avec l'API Fetch dans différents formats ?

Susan Sarandon
Libérer: 2024-11-03 03:43:31
original
747 Les gens l'ont consulté

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

Publication de données de formulaire avec l'API Fetch

Lors de l'utilisation de l'API Fetch pour soumettre des données de formulaire, il existe deux formats principaux à prendre en compte :

Multipart/ Form-Data

Lors de l'utilisation de FormData pour construire le corps de la requête, les données seront automatiquement envoyées au format multipart/form-data. Il s'agit d'un comportement par défaut de FormData et ne peut pas être modifié.

Application/x-www-form-urlencoded

Pour envoyer les données au format application/x-www-form-urlencoded, vous avez quelques options :

1. Chaîne codée en URL :

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

2. Objet 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>
Copier après la connexion

Notez que la spécification de l'en-tête Content-Type n'est pas nécessaire lors de l'utilisation de URLSearchParams, car elle définit automatiquement le type de contenu correct.

3. URLSearchParams depuis FormData :

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

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>
Copier après la connexion

Cette option permet de passer directement l'objet FormData pour créer l'objet URLSearchParams. Cependant, sa prise en charge par les navigateurs peut être limitée, alors assurez-vous de le tester minutieusement avant de l'utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal