Wie kann ich Formulardaten mit JavaScript/jQuery abrufen?

Question

Gibt es einen einfachen, einzeiligen Weg, um die Daten eines Formulars zu erhalten, wie es wäre, wenn es auf die klassische HTML-only Weise übermittelt würde?

Zum Beispiel:

        Hi
        Ho

Ausgabe:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

So etwas ist zu einfach, da es (korrekterweise) keine Textareas, Selects, Radio-Buttons und Checkboxes enthält:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

Answer 1

Verwenden Sie $('form').serializeArray(), das ein Array zurückgibt:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Eine andere Option ist $('form').serialize(), das einen String zurückgibt:

"foo=1&bar=xxx&this=hi"

Schauen Sie sich dieses jsfiddle-Demo unter diesem Link an

Answer 2

$('form').serialize() //das erzeugt: "foo=1&bar=xxx&this=hi"

demo

Answer 3

Aktualisierte Antwort für 2014: HTML5 FormData macht das

var formData = new FormData(document.querySelector('form'))

Dann können Sie formData genau so posten, wie es ist - es enthält alle Namen und Werte, die im Formular verwendet werden.

Hinweis: FormData-Objekte zeigen nichts an, wenn Sie sie loggen, was ärgerlich ist! Um FormData zu loggen, verwenden Sie console.log(formData.entries())

Answer 4

Auf der Grundlage von jQuery.serializeArray gibt key-value Paare zurück.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

Answer 5

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Jetzt kannst du formData.get('foo') verwenden, zum Beispiel.
  // Vergiss nicht e.preventDefault(), wenn du das normale Formularverhalten stoppen möchtest.
});

Dies ist eine kleinliche Antwort, aber lass mich erklären, warum dies eine bessere Lösung ist:

• Wir behandeln das Absenden eines Formulars korrekt und nicht einfach das Drücken einer Schaltfläche. Einige Leute drücken gerne die Eingabetaste auf Feldern. Einige Leute verwenden alternative Eingabegeräte wie Spracheingabe oder andere Hilfsmittel für die Barrierefreiheit. Bearbeiten Sie das Formularabsenden und lösen Sie es für alle korrekt.

• Wir greifen auf die Formulardaten des tatsächlich übermittelten Formulars zu. Wenn Sie später Ihren Formular-Selektor ändern, müssen Sie die Selektoren für alle Felder nicht ändern. Außerdem haben Sie möglicherweise mehrere Formulare mit denselben Eingabefeldnamen. Es ist nicht erforderlich, mit übermäßigen IDs und dergleichen eine Unterscheidung vorzunehmen, verfolgen Sie die Eingabefelder einfach basierend auf dem übermittelten Formular. Dies ermöglicht es Ihnen auch, einen einzelnen Ereignishandler für mehrere Formulare zu verwenden, wenn dies für Ihre Situation angemessen ist.

• Die FormData-Schnittstelle ist relativ neu, jedoch von Browsern gut unterstützt. Es ist eine großartige Möglichkeit, diese Datensammlung aufzubauen, um die tatsächlichen Werte dessen zu erhalten, was sich im Formular befindet. Ohne sie müssen Sie alle Elemente durchlaufen (zum Beispiel mit form.elements) und herausfinden, was ausgewählt ist, was nicht, was die Werte sind, usw. Es ist durchaus möglich, wenn Sie Unterstützung für alte Browser benötigen, aber die FormData-Schnittstelle ist einfacher.

• Ich benutze hier ES6... keineswegs eine Anforderung, also ändern Sie es zurück, um ES5-kompatibel zu sein, wenn Sie Unterstützung für alte Browser benötigen.