TechCodeview

Die JavaScript-FormData-Schnittstelle bietet eine Methode zum Erstellen eines Objekts mit Schlüssel-Wert-Paaren. Diese Objekte können über das Internet mit der Methode fetch() oder XMLHttpRequest.send() geteilt werden. Es nutzt die Funktionalität des HTML-Formularelements. Es wird dasselbe Format verwendet, das von einem Formular verwendet wird, dessen Codierungstyp auf „multipart/form-data“ eingestellt ist.

Wir können es auch direkt an den URLSearchParams-Konstruktor übergeben, um die Abfrageparameter abzurufen, genau wie im Tag-Verhalten bei der Übermittlung der GET-Anfrage.

Im Allgemeinen wird es verwendet, um einen Datensatz zu erstellen, der an den Server gesendet wird. Das FormData-Objekt ist ein Array von Arrays, das ein Array für jedes Element enthält.

Diese Arrays haben die folgenden drei Werte:

Name: Es enthält den Namen des Feldes.

Wert: Es enthält den Wert des Feldes, der ein String- oder Blob-Objekt sein kann.

Dateiname: Es enthält den Dateinamen, der eine Zeichenfolge ist, die den Namen enthält. Der Name wird auf dem Server gespeichert, wenn ein Blob-Objekt als 2 übergeben wird^ndParameter.

Warum FormData?

Die HTML-Formularelemente sind so entwickelt, dass ihre Felder und Werte automatisch erfasst werden. In solchen Szenarien hilft uns die FormData-Schnittstelle, HTML-Formulare mit oder ohne Dateien und Zusatzfelder zu versenden.

Es handelt sich um ein Objekt, das die vom Benutzer eingegebenen Formulardaten enthält.

Unten ist der Formulardatenkonstruktor:

 let formData = new FormData([form]); 

Die FormData-Objekte können von Netzwerkmethoden wie fetch als Körper akzeptiert werden. Es wird standardmäßig mit dem Content-Type: multipart/form-data codiert und versendet.

Der Server betrachtet es als reguläre Formularübermittlung.

Lassen Sie uns ein einfaches Beispiel für das Senden der FormData verstehen.

Senden einer grundlegenden FormData

Im folgenden Formular senden wir einfache FormData an den Server.

Index.html:

 formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; 

Im obigen Beispiel richten wir keine Backend-API zum Senden der Daten ein, da dies den Rahmen dieses Tutorials sprengt. Aber wir können die Nutzlast auf der Registerkarte „Netzwerk“ überprüfen und verstehen, wie die FormData-Schnittstelle funktioniert.

Wenn wir uns also die Netzwerkanfrage im Entwicklertool ansehen, wird die folgende Nutzlast angezeigt:

In der obigen Netzwerkanforderung werden die Formulardaten mithilfe des FormData-Objekts über das Netzwerk gesendet. Auf andere Weise müssen wir mehrere Methoden angeben, um die Daten aus dem Formular abzurufen.

Mithilfe der FormData-Schnittstelle können wir die formData daher einfach an den Server senden. Es ist nur ein einzeiliger Code.

FormData-Konstruktor

Der FormData()-Konstruktor wird zum Erstellen eines neuen FormData-Objekts verwendet. Es kann auf folgende Arten verwendet werden:

 new FormData() new FormData(form) new FormData(form, submitter) 

Parameter:

Formular (optional):

Es ist ein HTML-Element; Wenn es angegeben ist, wird das FormData-Objekt mit den aktuellen Schlüsseln/Werten des Formulars gefüllt. Es verwendet die Namensattributeigenschaften jedes Elements für die Schlüssel und ihren übermittelten Wert für die Werte. Es kodiert auch Dateieingabeinhalte.

Einreicher (optional):

Der Absender-Button ist ein Element eines Formulars. Wenn das übergebende Element über eine Namensattributeigenschaft verfügt, werden seine Daten in das FormData-Objekt aufgenommen.

Binärer Suchbaum vs. Binärbaum

FormData-Methoden

FormData bietet mehrere Methoden, die beim Zugriff auf und beim Ändern der Formularfelddaten hilfreich sein können.

In selteneren Fällen müssen wir möglicherweise die Formulardaten ändern, bevor wir sie an den Server senden. Diese Methoden können in diesen Fällen hilfreich sein.

Im Folgenden sind einige nützliche formData-Methoden aufgeführt:

formData.append(Name, Wert)

Es übernimmt den Namen und den Wert von zwei Argumenten und fügt ein Formularfeldobjekt mit dem bereitgestellten Namen und Wert hinzu.

formData.append(name, blob, fileName)

Es werden die Argumente „name“, „blob“ und „fileName“ verwendet. Es fügt ein Feld zum Bilden von Datenobjekten hinzu, wenn das HTML-Element lautet. Dann legt das dritte Argument fileName den Dateinamen entsprechend dem Dateinamen im Dateisystem des Benutzers fest.

formData.delete(name)

sind Musterbeispiele

Es nimmt einen Namen als Argument und entfernt das angegebene Feld mit demselben Namen.

formData.get(name)

Es akzeptiert auch einen Namen als Argument und ruft den Wert des angegebenen Felds mit dem angegebenen Namen ab.

formData.has(name)

Außerdem wird der Name als Argument verwendet, die Existenz des Felds anhand des angegebenen Namens überprüft und true zurückgegeben, wenn es existiert. andernfalls falsch.

Ein Formular kann mehrere Felder mit demselben Namen haben, daher müssen wir mehrere Anhängemethoden angeben, um alle Felder mit demselben Namen hinzuzufügen.

Die gleichnamigen Felder führen jedoch zu Fehlern und machen ihre Festlegung in der Datenbank komplexer. Daher stellt formData eine weitere Methode mit derselben Syntax wie append bereit, entfernt jedoch alle Felder mit dem angegebenen Namen und hängt dann ein neues Feld an. Dadurch wird sichergestellt, dass es einen eindeutigen Schlüssel mit einem Namen gibt.

 formData.set(name, value) formData.set(name, blob, fileName) 

Bei der Set-Methode funktioniert die Syntax wie bei der Append-Methode.

Wie iteriere ich FormData?

FormData bietet eine Methode FormData.entries() zum Durchlaufen aller Schlüssel. Diese Methode gibt einen Iterator zurück, der alle Schlüssel-/Werteinträge in den FormData durchläuft. Ein Schlüssel ist ein Zeichenfolgenobjekt, während der Wert entweder ein Blob oder eine Zeichenfolge sein kann.

Betrachten Sie das folgende Beispiel:

 formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } 

Die Ausgabe des obigen Beispiels wird sein:

 key1, value1 key2, value2 

Senden eines Formulars mit einer Datendatei

Die Dateien können auch über FormData versendet werden. Die Dateien wirken auf das Formularelement und werden als Content-Type: multipart/form-data gesendet. Die Multipart/Form-Data-Kodierung ermöglicht das Versenden von Dateien. Dies ist standardmäßig ein Teil der Formulardaten. Wir können die Dateien mit der Formulardatenkodierung an den Server senden.

Betrachten Sie das folgende Beispiel:

 File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; 

Im obigen Beispiel wird das Bildobjekt im Binärformat mithilfe von FormData gesendet. Wir können es auf der Registerkarte „Netzwerk“ des Entwicklertools nachsehen:

Formulardaten als Blob-Objekt senden

Das Senden von Formulardaten als Blob-Objekt ist eine einfache Möglichkeit, die dynamisch generierten Binärdaten zu senden. Es kann sich um ein beliebiges Bild oder einen beliebigen Klecks handeln. Wir können es direkt an den Server senden, indem wir es im Abruftext übergeben.

Es ist praktisch, Bilddaten und andere Formulardaten wie Name, Passwort usw. zu senden. Außerdem akzeptieren die Server mehrteilig codierte Formulare besser als binäre Daten.

Betrachten Sie das folgende Beispiel, bei dem das Bild zusammen mit den anderen Formulardaten als Formular gesendet wird.

 mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } 

Im obigen Beispiel können wir sehen, dass der Bild-Blob wie folgt hinzugefügt wird:

 formData.append('image', imageBlob, 'image.webp'); 

Das ist dasselbe wie ein , und der Benutzer hat eine Datei mit dem Namen „image.webp“ mit einigen Daten imageBlob aus dem Dateisystem übermittelt. Der Server liest sie als Daten in normaler Form.