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

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');

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);

---

Daten hinzufügen

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

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

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

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

---

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}`);
}

---

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));

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');

---

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!