HTML5 FormData -Methode Einführung und Implementierungsdateien in der Implementierungsdatei

XMLHTTPREQUEST ist eine Browser -Schnittstelle. Xmlhttprequest ist eine häufig verwendete Methode, um Daten im vorliegenden Browser zu interagieren. Im Februar 2008 wurde XMLHTTPREquest Level 2 im Vergleich zur vorherigen Generation vorgeschlagen. dass Sie Binärdateien hochladen können. Führen Sie vor, wie Sie Dateien mit Formdata hochladen.

Schauen Sie sich zunächst die grundlegende Methode von FormData an: FormData -Objekt. Geben Sie einfach die Formularform als Parameter in den FormData -Konstruktor ein:

 var form = document.getElementById (Form1);

Auf diese Weise kann die FD direkt über die Ajax Send () -Methode zum Hintergrund gesendet werden.

Das folgende Formular wird erstellt.

 <Formular name = Form1 ID = Form1> <p> Name: <Eingabe type = text name = name /> <p> Geschlecht: <Eingabe type = Radio name = Geschlechtswert = 1 /> männlich <Eingabe type = Radio name = Geschlechtswert = 2 /p> weiblich < /p> <p> stu-zum </P> <p> <Eingabe type = Taste name = b1 value = subclick = fsubmit ()/p> </form> <div id = result> </div>

Der obige Code erstellt ein Formular, füllt einfach einige Informationen aus und wählen Sie ein Bild als Avatar aus, setzen Sie eine DIV ein, um das Ergebnis der Rückgabe zu speichern.

Für einfach verwenden wir immer noch Ajax, die von JQuery eingekapselt sind, um Daten auf den Hintergrund zu übertragen:

 Funktion fSUBMIT () {var Form = document.getElementById (Form1); Sagen Sie JQuery nicht die Senden von Dateninhalten: Falsch, // Sagen Sie JQuery, dass Sie den Inhaltsanforderungserfolg nicht festlegen sollen: Funktion (Antwort, Status, xhr) {console.log (xhr); EJSON (Antwort); + JSON ['Nummer']; .html (Ergebnis);}});

Der server.php im obigen Code ist die Datei des Servers, die die AJAX -Anforderung empfängt und das Empfangsergebnis zurückgibt.

 <? ISSET ($ _ post ['Nummer'])? ['Name'] = $ name; '] = false;} echo json_encode ($ response);?>

Klicken Sie nach dem Ausfüllen der Informationen, um die folgenden Effekte auf die Seite zu erhalten.

Wenn Sie ein nativer JavaScript -Enthusiast sind, können die obigen Funktionen natürlich erreicht werden.

 Funktion FSUBMIT () {var Form = document.getElementById (Form1); (olq. ReadyState == 4) {if (oreq.Status == 200) {console.log (typeof oreq.responsext); Persönliche Informationen: <br/> Name:+json ['Name']+<br/> Geschlecht:+JSON ['Gender']+<br/> Nummer:+json ['Nummer']; <<< br /> avatar: <img src = ' + json [' foto '] +' Höhe = 50 Style = Border-Radius: 50%; post, server.php);

Zusätzlich zu den neuen Objekten über Formdata wird das Formular direkt in den Parameter übergeben, und es gibt andere Funktionen. Die meisten Artikel, die von FormData im Internet eingeführt wurden, erwähnen also nur die Methode APend (). Lassen Sie uns die Konsole wissen:

Nach der Konsole haben wir eine große Entdeckung.

Die Methode von append () wird verwendet, um dem FormularData -Objekt Schlüsselwerte hinzuzufügen:

 fd.Append ('key1', value1);

FD ist das Objekt von FormData, das neu erstellt werden kann.

Legen Sie den entsprechenden Schlüsseldwert des Schlüsselwerts fest (n)

 fd.set ('key1', value1);

Es sieht ein bisschen ähnlich wie die append () -Methode. Vergleiche immer noch durch das Beispiel, wir basieren auf der Form der Form des Formulars.

 Fd.Append ('Name', Will);

Zwei Schlüssel ist der Schlüsselwert des Namens:

 fd.set ('name', Will);

Nur ein Schlüssel ist der Schlüsselwert des Namens:

Das obige ist der Unterschied zwischen append () und set (). Wenn der festgelegte Wert nicht vorhanden ist, ist der Effekt der beiden gleich.

Erhalten Sie einen Parameter, der angibt, dass der Name des Schlüsselwerts, den Sie löschen möchten, bei mehreren gleichen Schlüsselwerten löschen, wenn es mehrere gleiche Schlüsselwerte gibt:

 fd.Append ('name', 'Will');

Die Namensinformationen in Formular und die neu hinzugefügten Namensinformationen über append () wurden gelöscht.

Erhalten Sie einen Parameter, um den Namen des Schlüssels anzugeben, den Sie finden müssen, und geben Sie den ersten Wertwert des ersten Schlüssels zurück. Wenn es mehrere gleiche Schlüssel gibt, und den gesamten entsprechenden Wert dieses Schlüssels zurückgeben.

Basierend auf der obigen Formform:

 fd.Append ('name', 'Will');

 fd.Append ('name', 'Will');

Diese Methode empfängt auch einen Parameter, der auch der Name des Schlüssels ist und einen booleschen Wert zurückgibt, um festzustellen, ob das FormularData -Objekt den Schlüssel enthält. Die obige Form ist ein Beispiel:

 console.log (fd.has ('name');

Diese Methode muss keine Parameter empfangen und einen Iterator zurückgeben. Die obige Form ist ein Beispiel:

 für (var Schlüssel von fd.keys ()) {console.log (Schlüssel);}

Das Ergebnis ist:

Name

Geschlecht

Nummer

Foto

Mit dem Iterativ des Schlüssels ist es natürlich unverzichtbar, den Wert -Iterator zu durchqueren. Values ​​() ist ein Iterator des Wertes.

 für (VAR -Wert von fd.values ​​()) {console.log (Wert);}

Ergebnis:

Es gibt einen Iterator, der den Schlüssel durchquert, und es gibt auch die Iteratoren von Wert, warum nicht zusammen mit zwei zusammengehen! Einträge () können einen Iterator mit einem Schlüsselwertpaar zurückgeben:

 für (var pair von fd.ententriies ()) {console.log (pair [0]+ ','+ pair [1]);}

Ergebnis:

Da FormData eine neue Schnittstelle von XMLHTTPrequest Level 2 ist, unterstützt der IE -Browser, der jetzt niedriger ist als IE10, FormData nicht. Die Abbildung unten:

Das oben genannte ist der Inhalt dieses Artikels.