Wie rufe ich Formulardaten als JSON-Objekt mit JavaScript/jQuery ab?

Formulardaten mit JavaScript/jQuery abrufen

Beim Erfassen von Formulardaten suchen Sie möglicherweise nach einem unkomplizierten Ansatz, der die traditionelle reine HTML-Übermittlung widerspiegelt Verfahren. Betrachten Sie das folgende Formular:

`

<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>

`

Ihr Ziel ist es, das folgende JSON-Objekt aus diesem Formular zu erhalten:

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

Allerdings erfassen stark vereinfachte Ansätze wie die folgenden möglicherweise nicht alle Formularelemente (wie Textbereiche, Auswahlmöglichkeiten, Optionsfelder und Kontrollkästchen):

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

Lösung : $('form').serializeArray()

Glücklicherweise bietet jQuery die Methode $('form').serializeArray(), die ein Array von Objekten zurückgibt, das den Namen und den Wert jedes Objekts enthält Formularelement:

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

Alternative Option: $('form').serialize()

Wenn Sie eine String-Darstellung der Formulardaten bevorzugen, können Sie dies tun Verwenden Sie $('form').serialize(), das eine URL-codierte Zeichenfolge zurückgibt:

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

Eine Live-Demonstration finden Sie in der bereitgestellten jsfiddle-Demo.

Das obige ist der detaillierte Inhalt vonWie rufe ich Formulardaten als JSON-Objekt mit JavaScript/jQuery ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!