JavaScript FormData

In der modernen Webentwicklung ist die effiziente Handhabung von Formulardaten entscheidend für die Erstellung dynamischer und interaktiver Benutzererfahrungen. JavaScript bietet ein leistungsstarkes Tool zur Verwaltung von Formulardaten über die FormData-API. In diesem Leitfaden tauchen wir tief in FormData ein, erkunden seine Funktionen, Syntax und Best Practices für die Implementierung.

FormData verstehen

FormData ist ein integriertes JavaScript-Objekt, mit dem Sie Formulardaten erfassen und in ein Schlüssel-Wert-Paar-Format umwandeln können. Es vereinfacht das Sammeln von Informationen aus HTML-Formularen und deren asynchrone Übertragung an den Server mithilfe der Fetch-API.

FormData-Objekte erstellen

Um ein FormData-Objekt zu erstellen, instanziieren Sie es einfach mit dem FormData()-Konstruktor. Sie können auch alle Inhalte einer FormData-Instanz anzeigen, indem Sie die Methode entries() darauf aufrufen. Die Methode gibt ein Iterator-Objekt zurück, bei dem jedes Element einen Schlüssel und einen Wert enthält:

---

<script>
  function onSubmit(event) {
    event.preventDefault();
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    let results = '';
    for (const [key, value] of formData.entries()) {
      results += `${key}: ${value}\n`;
    }
    alert(results)
  }
</script>
<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="username" value="John Doe" />
  <input type="email" name="email" value="[email protected]" />
  <input type="submit" />
</form>

Try it Yourself »

Formulardaten abrufen

Sie können auf einzelne Formularfelder zugreifen, indem Sie die Methode get() verwenden, oder durch alle Formularfelder iterieren, indem Sie entries() verwenden, wie Sie es im vorherigen Beispiel gesehen haben.

---

<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="username" value="John Doe" />
  <input type="email" name="email" value="[email protected]" />
  <input type="submit" />
</form>
<script>
  function onSubmit(event) {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const username = formData.get('username');
    const email = formData.get('email');
    alert(`username: ${username}; email: ${email}`);
  }
</script>

Try it Yourself »

FormData mit der Fetch-API senden

Einer der häufigsten Anwendungsfälle für FormData ist das asynchrone Senden von Formulardaten an den Server. Dies lässt sich einfach mit der Fetch-API erreichen:

---

<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="title" value="A title" />
  <input type="text" name="body" value="A body" />
  <input type="submit" value="Submit Post" />
</form>
<div>post id: <span id="response"></span></div>
<script>
  function onSubmit(event) {
    event.preventDefault();
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const responseSpan = document.getElementById('response');
    fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: formData
    })
      .then(response => response.json())
      .then(data => { responseSpan.innerHTML = data.id; })
      .catch(error => console.error('Error:', error));
  }
</script>

Try it Yourself »

WARNING

Wenn Sie Ihr Formular an den FormData-Konstruktor übergeben, werden automatisch alle Formularfelder im HTML-Formular eingeschlossen, einschließlich ausgeblendeter Felder. Dies kann zu unerwartetem Verhalten führen, wenn Sie nicht aufpassen, insbesondere wenn sich sensible oder unnötige Felder im Formular befinden.

Dateiuploads verarbeiten

FormData glänzt bei der Verarbeitung von Dateiuploads und ist daher ein unverzichtbares Tool für Webentwickler, die mit Datei-Eingabefeldern in Formularen arbeiten. Sehen wir uns an, wie wir Dateiuploads mit FormData verarbeiten können:

---

<form id="fileUploadForm">
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>
<script>
    const form = document.getElementById('fileUploadForm');
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const fileInput = document.querySelector('input[type="file"]');
        const file = fileInput.files[0];
        if (file) formData.append('file', file);
        fetch('https://httpbin.org/post', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => console.log('Upload successful:', data))
        .catch(error => console.error('Error:', error));
    });
</script>

Fazit

FormData ist ein vielseitiges und leistungsstarkes Tool zur Verwaltung von Formulardaten in JavaScript-Anwendungen. Ob Sie einfache Texteingaben oder komplexe Dateiuploads verarbeiten – FormData vereinfacht den Prozess und bietet eine praktische Schnittstelle zur Interaktion mit Formulardaten. Durch die Beherrschung von FormData können Sie die Interaktivität und Reaktionsfähigkeit Ihrer Webanwendungen verbessern und ein nahtloses Benutzererlebnis bieten.

Practice

Welchen Vorteil bietet die Verwendung des FormData-Objekts in JavaScript?

Es vereinfacht das Erfassen von Formulardaten aus HTML-Formularen.Es ermöglicht die einfache Verarbeitung von Dateiuploads in Formularen.Es verschlüsselt Formulardaten automatisch für eine sichere Übertragung.Es konvertiert Formulardaten in das JSON-Format.