Formdata in JavaScript: definitiver Handbuch zum Umgang mit Formularen

Das FormData-Objekt von JavaScript bietet eine bequeme Möglichkeit, HTML-Formulardaten zu verarbeiten, insbesondere wenn AJAX oder fetch zum Senden von Daten an einen Server verwendet wird. Der new FormData()-Konstruktor erstellt eine neue FormData-Instanz.

Sie können HTML-Formularelemente direkt als Parameter an new FormData() übergeben. Der Konstruktor sammelt automatisch alle Eingabefelddaten im Formular, einschließlich Textfeldern, Kontrollkästchen, Optionsfeldern und Datei-Upload-Feldern, und fügt sie dem FormData-Objekt hinzu.

Vorteile der Verwendung von FormData

Der Hauptvorteil von

FormData besteht darin, dass es die Verarbeitung komplexer Daten vereinfacht, insbesondere wenn das Formular mehrere Felder oder Dateien enthält. Es formatiert die Daten automatisch in den entsprechenden HTTP-Anfragetext und legt die erforderlichen multipart/form-data-Header-Informationen fest. Dies macht FormData zu einer idealen Wahl für das dynamische Senden von Formulardaten in modernen Webanwendungen ohne Seitenaktualisierung und bietet eine effiziente und flexible Lösung für die Formularverarbeitung.

Beispiel ohne Formularelemente

Das folgende Beispiel zeigt, wie ein FormData-Objekt erstellt wird, ohne auf ein Formularelement angewiesen zu sein:

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Beschreibung:

1. Erstellt ein leeres FormData-Objekt.
2. Fügen Sie Schlüssel-Wert-Paare manuell mit der Methode append() hinzu. Beispielsweise fügt formData.append('nombre', 'John Serrano') ein Feld namens nombre mit dem Wert John Serrano hinzu. Sie können Dateien auch direkt hinzufügen, z. B. fileInput.files[0].
3. Verwenden Sie fetch, um das FormData-Objekt an den Server zu senden. fetch setzt den Content-Type-Header automatisch auf multipart/form-data.

Dieser Ansatz ist nützlich, wenn Sie Daten dynamisch erstellen müssen, ohne auf HTML-Formulare angewiesen zu sein.

Beispiele für die Verwendung von Formularelementen

Das folgende Beispiel zeigt, wie ein FormData-Objekt mithilfe von HTML-Formularelementen erstellt wird:

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Beschreibung:

1. Ein HTML-Formular, das verschiedene Eingabefelder (Text, Zahlen, Dateien) enthält. Das name-Attribut jedes Felds ist entscheidend, da es den Schlüsselnamen im FormData-Objekt bestimmt.
2. Übergeben Sie das Formularelement als Parameter an new FormData() und der Konstruktor erfasst automatisch die Formulardaten.
3. Verwenden Sie fetch, um Daten an den Server zu senden.

Formulardaten verarbeiten und serialisieren

Einige APIs (z. B. JSON Placeholder) akzeptieren keine FormData-Objekte und erwarten stattdessen JSON-Objekte. Um FormData in JSON zu konvertieren, können Sie eine Schleife verwenden, um die Schlüssel-Wert-Paare zu durchlaufen:

<code class="language-javascript">const obj = {};
const formData = new FormData(form);

for (const key of formData.keys()) {
  obj[key] = formData.get(key);
}</code>

oder prägnanter Object.fromEntries():

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Reaktionsbeispiel

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

Zusammenfassung

FormData ist ein leistungsstarkes Tool für die Arbeit mit Formulardaten in JavaScript, das den Datenerfassungs- und -sendeprozess vereinfacht. Obwohl nicht alle APIs FormData unterstützen, können Sie es problemlos in andere Formate wie JSON konvertieren. Die Verwendung von FormData kann die Flexibilität und Effizienz bei der Formularverarbeitung erhöhen, insbesondere bei Verwendung von AJAX oder fetch.

Das obige ist der detaillierte Inhalt vonFormdata in JavaScript: definitiver Handbuch zum Umgang mit Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!