HowTo: Form Values/Inputs über AJAX mit jQuery serialize übertragen

Wenn man viele Daten über AJAX übertragen möchte muss man ein klein wenig basteln - oder jQuery.serialize() nehmen. Damit kann man Form Daten sehr einfach in einen String serialisieren und via AJAX absenden.

Das Problem

Wir haben bestimmte Daten die wir per AJAX versenden müssen. Wenn die Anzahl auch noch variable ist und vielleicht vom Benutzer beeinflusst werden kann, wird es noch etwas kniffliger.

Hier mal ein ganz normaler AJAX Call mit jQuery:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

Im "Data" werden die Daten mitgegeben, welche gesendet werden sollen. Wenn man nun eine variable Länge an Daten hat muss man sich diesen string ja selbst erzeugen und das kann etwas mühe machen (gut - für die jQuery Experten ein 3 Zeiler ;) ).

jQuery.serialize()

Mit jQuery.serialize() geht es aber auch in einem Einzeiler. Man übergibt einen jQuery Selector und jQuery baut einen string zusammen, den wir als Data verwenden können:

        function sendFormvalues() {
        
            var data = $("form :input").serialize();
            alert(data);
            $.ajax({
                type: "POST",
                url: "<%=Url.Action("LogOn","Account") %>",
                data: data,
            });
        }

In der ersten Zeile der Funktion geb ich mittels eines Selectors an, welche Daten ich alles haben möchte (alle Input Felder) und über serialize bekomm ich meinen String. Den kann ich dann als Data mit angeben und fertig :)

Hier mal zur Verdeutlichung was jQuery mit dieser Form macht:

Bis auf die Checkbox ergibt das auch alles sinn. Ich nehme an bei der Checkbox ist der ASP.NET MVC Helper etwas seltsam.

jQuery rockt :)

Wenn man also seine Forms oder nur Teile davon via AJAX versenden will -> der serializer fetzt.

[ Download Democode ]