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 ]

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

3 Responses

1. 

   Sascha

   9. February 2010

   Hi, nettes Beispiel, ich wollte mich schon etwas länger mit Jquery auseinandersetzen, wusste nicht das dies so einfach zu handhaben ist. Kannst du mir eine gute Quelle geben, wo ich mich einarbeiten könnte?

   Reply
2. 

   Robert Mühsig

   9. February 2010

   So direkt ein Learningguide kenn ich nicht, diese Seite ist aber nicht ganz schlecht: http://www.learningjquery.com/

   Ansonsten probier dich einfach mal aus – an konkreten Problemen lernt man es am besten.

   Reply
3. 

   Roberto

   9. February 2010

   Hallo Robert,

   woher tust Du nur immer die passenden Bildchen am Anfang ?

   Das mit dem Selector und serialize find ich super Das schöne ist, man kann auch ganze Objekte serialisieren – Hab da mal was gebastelt (leider noch in vb) http://bit.ly/aYUnO9

   Reply