Formulardaten mit JQuery abrufen
In diesem Artikel erfahren Sie, wie Sie Formulardaten mit JQuery abrufen. Die Methode serialize() wird häufig verwendet, um Daten aus einer Formularübermittlung oder einer Aktualisierung in den Eingabefeldern zu nutzen.
Eine andere Methode, serializeArray(), wird parallel verwendet, um Formulardaten in Form eines Arrays darzustellen. Das Format zum Speichern von Formulardaten als Objekt ist noch in jede definierte Methode integriert, aber es ist auch möglich.
Lassen Sie uns lernen, wie wir jedem der oben genannten Ansätze folgen können.
Formulardaten mit JQuery abrufen
Wenn wir in jQuery die Formular- oder Eingabefelddaten abrufen möchten, gibt es zwei Möglichkeiten. Die eine ist die serialize()-Methode und die andere die serializeArray()-Methode.
Diese Techniken sind hilfreich, um die Formulardaten zu erhalten, wenn wir die Benutzerpräferenzen, die Benutzerkategorisierung und vieles mehr vollständig kennen. Diese können auch in der Datenbank gespeichert werden.
Welches Format können wir also haben, wenn wir die Formulardaten erhalten?
Die Methode serialize() gibt einen String zurück, und die verschiedenen Eingabetypen werden durch & getrennt. Schließlich haben wir die Methode serializeArray(), die die Formulardaten skalierbarer abruft.
Es zeigt Daten als Array an. Und hier werden wir auch prüfen, ob wir diese Daten als Objekt erhalten können. Springen wir also zum Codesegment!
Verwenden Sie die serialize()-Methode, um Formulardaten abzurufen
In diesem Beispiel haben wir zwei Felder. Ein Eingabefeld vom Typ text und das andere ist ein einfacher Abschnitt Auswahloption. Unabhängig von der Eingabe, die wir in diese Felder eingeben, können wir diese Daten in einem Zeichenfolgenformat abrufen, indem wir die Methode serialize() verwenden. Sehen wir uns also an, was in der Codebasis passiert.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serialize {
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="name">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="blue">brown</option>
</select>
</form>
<div>Serialize:
<div id="serialize"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serialize').text(
JSON.stringify($('form').serialize())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Ausgang:
Wenn wir den Wert in das Feld Name eingeben, sehen wir, dass das Update hinzugefügt wird. Außerdem wurde in der Auswahlbox die Haarfarbe schwarz gewählt und in der Zeichenfolge modifiziert, die durch die Methode serialize() bestimmt wurde.
Verwenden Sie die serializeArray()-Methode, um Formulardaten abzurufen
Dieses spezielle Beispiel impliziert dieselbe Aufgabe wie im vorherigen Segment, aber der Unterschied besteht darin, dass die Ausgabe hier in Form eines Arrays erfolgt. Ein Array ist definierter, und diese Array-Konvention entspricht nicht dem typischen Stil; Stattdessen handelt es sich um ein Array von Objekten.
Das mit 0 indizierte Array-Element enthält also den Schlüsselpaar-Wert des ersten Eingabefelds, und das mit 1 indizierte Array speichert die Auswahl select-option. Aber lassen Sie uns zuerst den Code überprüfen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializearray{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</form>
<div>Serialize Array:
<div id="serializearray"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serializearray').text(
JSON.stringify($('form').serializeArray())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Ausgang:
Hier wird der Wert geändert und die Haarfarbe aktualisiert. Aber Sie bemerken, dass das Ergebnis in Form eines Arrays vorliegt und zwei Objekte als Einträge verwendet hat.
Als nächstes wollen wir untersuchen, ob wir die Formulardaten direkt als Objekte speichern können. Also lass es uns angehen.
Formulardaten in einem Objektformular abrufen
Für dieses Beispiel verwenden wir den gleichen Code wie zuvor, aber hier müssen wir zwei div-Elemente verwenden, um zwei Objekte auszugeben. Wir haben eine $.each()-Methode hinzugefügt, die das von der serializeArray()-Methode generierte Array durchläuft und sie als Objekte parst.
Sie werden feststellen, dass wir zwei bedingte Anweisungen verwendet haben, um die Array-Indizes zu definieren. Andernfalls wird das letzte Element durchlaufen, was nur das letzte Feld ergibt. Sehen wir uns also zuerst das Code-Snippet an.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializeobj1, #serializeobj2{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form id="form">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="green">brown</option>
</select>
</form>
<div>Serialize Object:
<div id="serializeobj1"></div>
<div id="serializeobj2"></div>
</div>
<script>
$(function() {
var obj = {}
var cnt=0;
var update = function() {
$.each(
$('#form').serializeArray(), function(i, val){
if(i==0){
$('#serializeobj1').text(
JSON.stringify(
obj[i]=val
)
)
}
if(i==1){
$('#serializeobj2').text(
JSON.stringify(
obj[i]=val
)
)
}
})
};
update();
$('form').change(update);
})
</script>
</body>
</html>
Ausgang:
