Comment envoyer des données de formulaire en tant que « application/x-www-form-urlencoded » avec l'API Fetch ?

Publication des données d'un formulaire avec l'API Fetch à l'aide d'Application/x-www-form-urlencoded

Lors de la soumission d'un formulaire, vous pouvez rencontrer la question de savoir comment envoyer le données à l’aide de l’API Fetch. Par défaut, l'utilisation de FormData pour envoyer le corps entraîne l'envoi des données sous forme de données multipart/form. Cependant, si vous souhaitez envoyer des données au format application/x-www-form-urlencoded, quelques options sont disponibles.

FormData avec le format Multipart/Form-Data

Utilisation de FormData vous verrouille automatiquement dans l'envoi de données au format multipart/form-data. Pour éviter cela, vous pouvez créer manuellement une chaîne codée en URL ou un objet URLSearchParams, plutôt que d'utiliser FormData. Vous trouverez ci-dessous un extrait de code qui parcourt les éléments du formulaire et crée un objet URLSearchParams :

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

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

Remarque : Vous n'avez pas besoin de spécifier explicitement un en-tête Content-Type.

URLSearchParams avec FormData

Une autre option expérimentale consiste à créer un objet URLSearchParams et à transmettre l'objet FormData directement, plutôt que de parcourir les valeurs en boucle :

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

Bien que cette méthode ait un certain support expérimental dans les navigateurs, il est recommandé de 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!