Wie kann ich Formulardaten mit JavaScript/jQuery abrufen?
Nov 10, 2024 pm 03:31 PMAbrufen von Formulardaten mit JavaScript/jQuery
Formularübermittlungen erfordern häufig das Abrufen von Formulardaten zur Validierung oder Verarbeitung auf der Clientseite. Zu diesen Daten gehören Eingabefelder, Auswahllisten und andere Elemente. Eine häufig gestellte Frage ist, wie man diese Daten auf vereinfachte Weise erhält.
Verwendung der Methode serializeArray() von jQuery
Eine elegante Lösung besteht darin, die Methode jQuery() zu nutzen. Dies gibt ein Array von Objekten zurück, die die Formulardaten darstellen. Diese Methode serialisiert das Formular effektiv in ein Array von Schlüssel-Wert-Paaren:
$(function () { var formData = $('#form').serializeArray(); });
Wenn Ihr Formular beispielsweise die folgenden Felder enthält:
<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> </select>
Die Ausgabe lautet:
[ {"name":"foo","value":"1"}, {"name":"bar","value":"xxx"}, {"name":"this","value":"hi"} ]
Verwenden der Methode serialize() von jQuery
Alternativ können Sie jQuery() verwenden, um eine Abfragezeichenfolgendarstellung der Formulardaten zu erstellen:
$(function () { var formData = $('#form').serialize(); });
Diese Methode gibt eine Zeichenfolge aus, die durch kaufmännische Und-Zeichen getrennte Schlüssel-Wert-Paare enthält und zur Übermittlung an einen Server geeignet ist:
"foo=1&bar=xxx&this=hi"
Demonstration
Sehen Sie sich a an Praktische Demonstration des Abrufens von Formulardaten mit beiden jQuery-Methoden in dieser JSFiddle: https://jsfiddle.net/t7hvjne1/
Das obige ist der detaillierte Inhalt vonWie kann ich Formulardaten mit JavaScript/jQuery abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

Benutzerdefinierte Google -Search -API -Setup -Tutorial

8 atemberaubende JQuery -Seiten -Layout -Plugins

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

10 JavaScript & JQuery MVC -Tutorials
