Publier des données de formulaire avec l'API Fetch

Lorsque vous utilisez l'interface FormData dans API Fetch pour publier des données de formulaire, il est important de comprendre son comportement par défaut. Par défaut, il envoie des données à l'aide du format "Multipart / Form-Data", qui n'est pas compatible avec le format "application / x-www-form-urlencoded.

Si vous souhaitez publier des données de formulaire comme "application / x-www-form-urlencoded" en utilisant l'api fetch, vous pouvez suivre ces étapes:

1. Convertir FormData en UrlSearchParams: Utilisez une boucle pour itera par UrlSearchParams:

   L'objet FormData et ajoutez chaque paire de valeurs clés à un objet UrlSearchParams.

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

   const data = new UrlSearchParams (); for (const paire de nouvelles formdata (formage)) { data.append (paire [0], paire [1]); }

   ou

   , utilisez la méthode expérimentale:

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

   const data = new UrlSearchParams (new FormData (Formement));
   Remarque: Assurez-vous que votre navigateur prend en charge cette dernière méthode avant de l'utiliser.

2. Envoyez des données à l'aide de Fetch API:

   Faites une demande de post avec le corps défini sur l'objet UrlSearchParams. Ne spécifiez pas un en-tête de type contenu, car la valeur par défaut sera "Application / x-www-form-urlencoded".

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

   fetch (url, {{ Méthode: «Post», corps: données, }) .alors(…);