veröffentlichen Formdaten mit der Fetch -API

Bei Verwendung der FormData -Schnittstelle in der Fetch -API zum Posten von Formdaten ist es wichtig, ihr Standardverhalten zu verstehen. Standardmäßig sendet es Daten mit dem Format "MultiPart/Form-Data", das nicht mit dem Format "Anwendung/x-www-form-urlencoded" kompatibel ist. "Anwendung/x-www-form-urlencoded" Mit Fetch-API können Sie folgende Schritte befolgen:

1. konvertieren Formdata in urlSearchParams:

   Verwenden Sie einen Loop, um durch die Itereration durchzusetzen das FormularData-Objekt und fügen Sie jedes Schlüsselwertpaar an ein urlSearchParams-Objekt an.

   const data = new urlSearchParams (); für (const Paar neuer FormData (Formelement)) { Data.Append (Paar [0], Paar [1]); }

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

   oder

   verwenden Sie die experimentelle Methode:

   const data = new urlSearchParams (neue FormTata (Formelement));

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

2. Senden Sie Daten mit Fetch -API:

   Erstellen Sie eine Postanfrage mit dem Körper, das auf das Objekt von urlSearchParams eingestellt ist. Geben Sie keinen Header vom Typ Inhalt an, da der Standard "Anwendung/x-www-form-urlencoded" ist.

   fetch (url, { Methode: 'Post', Körper: Daten, }) .Dann(…);

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