Heim > Web-Frontend > js-Tutorial > Alles, was Sie über das „FormData'-Objekt in JavaScript wissen müssen

Alles, was Sie über das „FormData'-Objekt in JavaScript wissen müssen

Patricia Arquette
Freigeben: 2024-11-23 02:22:10
Original
831 Leute haben es durchsucht

Sve što treba da znate o `FormData` objektu u JavaScript-u

Bei der Arbeit mit Daten aus HTML-Formularen in JavaScript müssen Sie diese Daten häufig sammeln, bearbeiten und an den Server senden. Hier kommt FormData ins Spiel – eine leistungsstarke und flexible Formularverwaltungs-API. In diesem Beitrag erklären wir ausführlich, wie FormData funktioniert, welche Vorteile es bietet und wie Sie es in realen Szenarien verwenden können.


Was ist FormData?

FormData ist ein eingebettetes JavaScript-Objekt, das Folgendes ermöglicht:

  • Einfache Datenerfassung aus HTML-Formularen.

  • Senden dieser Daten an den Server mithilfe der Fetch-API oder XMLHttpRequest.

  • Arbeiten Sie mit Binärdaten wie Dateien.

Dieses Objekt formatiert Daten automatisch entsprechend dem MIME-Typ multipart/form-data und eignet sich daher ideal zum Senden komplexer Daten, einschließlich Dateien.


Wie erstelle ich ein FormData-Objekt?

Erstellen eines leeren FormData-Objekts

Wenn Sie Daten manuell hinzufügen möchten, verwenden Sie den leeren FormData-Konstruktor:

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');
Nach dem Login kopieren
Nach dem Login kopieren

Erstellen eines FormData-Objekts aus einem Formular

Wenn Sie ein HTML-Formular haben, können Sie die Formularreferenz direkt an den FormData-Konstruktor übergeben, der automatisch alle Daten daraus sammelt.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);
Nach dem Login kopieren

Daten hinzufügen

Daten werden mit der Methode .append(key, value) angehängt:

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');
Nach dem Login kopieren

Wenn Sie eine Datei aus hinzufügen, verwenden Sie einfach .files[0]:

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);
Nach dem Login kopieren

Daten lesen

Um die Daten im FormData-Objekt zu durchlaufen, verwenden Sie eine for...of-Schleife zusammen mit der .entries()-Methode:

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}
Nach dem Login kopieren

FormData-Daten werden an den Server gesendet

FormData eignet sich ideal zum Senden von Daten an den Server mithilfe der Fetch-API. Hier ist ein einfaches Beispiel:

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));
Nach dem Login kopieren

Der Content-Type-Header muss nicht manuell festgelegt werden. FormData erledigt dies automatisch.


Vorteile von FormData

  1. Arbeiten mit Dateien

    Mit FormData können Sie Dateien ganz einfach direkt aus hinzufügen und senden. Felder.

  2. Automatische Serialisierung

    Anstatt die Daten manuell zu formatieren, formatiert FormData sie automatisch in Multipart-/Formulardaten.

  3. Flexibilität

    Einfache Verwaltung von Schlüssel-Wert-Paaren, einschließlich der Möglichkeit, Daten zu iterieren und zu aktualisieren.

  4. Binärdatenunterstützung

    Es eignet sich ideal zum Versenden von Binärdaten wie Bildern, PDFs oder anderen Dateien.


Beispiel aus der Praxis: Anmeldeformular

Hier ist ein vollständiges Beispiel, in dem wir Daten aus dem Formular sammeln und an den Server senden:

HTML-Formular

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');
Nach dem Login kopieren
Nach dem Login kopieren

Nützliche Tipps

  • Wenn Sie die Daten manuell ändern möchten, verwenden Sie .set(key, value) anstelle von .append().

  • Mit der Methode .has(key) können Sie überprüfen, ob ein bestimmter Schlüssel vorhanden ist.

  • Um Daten zu entfernen, verwenden Sie .delete(key).


Abschluss

FormData ist ein leistungsstarkes Tool zum Arbeiten mit Formulardaten. Es ermöglicht ein einfaches Sammeln, Bearbeiten und Versenden von Daten, auch bei der Arbeit mit Dateien. Seine Flexibilität und einfache Integration mit modernen JavaScript-APIs machen es für viele Webanwendungen unverzichtbar.

Das obige ist der detaillierte Inhalt vonAlles, was Sie über das „FormData'-Objekt in JavaScript wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage