Comment envoyer des données de formulaire avec l'API Fetch dans différents 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>

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>

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>

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!