mit Jquery eine Form auslesen und mit Ajax Post versenden

Will man die Values einer Form dynamisch holen und mit Ajax verschicken mit Jquery
muss man wohl einiges beachten.
Eine gescheite -outthebox- Lösung scheints da nicht zu geben bzw. ich hab sie nicht gefunden.

1. Daten holen
Die Daten holt man am besten über die Jquery Methode serializeArray().

var s = $('#campaigns form').serializeArray()

Damit holt Jquery alle Values in dieser Form als Array, bei radio oder checkbox types jeweils die aktivierten.

2. Wie versenden?
Nun stellt sich die Frage, wie man die Daten schön aufbereitet und dann versendet.

Man könnte jeden Value manuell als Parameter angeben, ist aber ein wenig umständlich.
Am besten wäre eine Lösung die das Array in ein JSON String wandelt und damit einen Parameter zu füllen:

vars=JSON

Auf dem verarbeitetenden Server kann man den dann wieder decodieren und schön auf key:value pairs arbeiten.

Leider kann Jquery das nicht von Haus aus, dafür braucht es einen JSON stringifier.
Den gibts hier: http://json.org/json2.js (Update: https://github.com/douglascrockford/JSON-js)

Damit gehts dann so:

$.post(url, {module : "saveCampaign",vars : JSON.stringify(s)},function(data){
createActvityDoneDiv_(randomId,data);
})

Auf dem Server decodiert man das dann:

$s = json_decode($_POST['vars']);

…und man bekommt sowas:

[0] = stdClass Object
(
[name] = Name
[value] = asdasdass
)

[1] = stdClass Object
(
[name] = status
[value] = enabled
)

Damit kommt ja schon klar auf dem Server
aber ist doch irgendwie ne scheiss Struktur.
So eine will man haben:

[Name] = asdasdass
[status] = enabled

Da muss der Client wohl noch was arbeiten:

var t = {};
s = $('#campaigns form').serializeArray();
jQuery.each(s,function(){
t[this.name]=this.value;
});
//und ab
$.post(url, {module : "saveCampaign",vars : JSON.stringify(t)},function(data){
createActvityDoneDiv_(randomId,data);
})

Dann gehts.

6 Replies to “mit Jquery eine Form auslesen und mit Ajax Post versenden”

  1. was spricht gegen sowas:

    
    $.post( url , {
    
    		'param1'		:	$("#field1").val(),
    		'param2'		:	someFunction( $("#field2").val() ),
    		'param3'		:	$("#field3").val()
    
    	});
    
    

    ?

    ich mach das immer in Handarbeit an der serialize Methode vorbei, dafür kann man dann noch die Values nach Belieben bearbeiten (s.o. )

  2. ist halt handarbeit.
    muss man ja alles doppelt schreiben und bei radiobuttons und checkboxen muss man die aktiven auch noch selbst holen
    bearbeiten kann man die auch noch in der each, wenns sein muss

  3. var s = $(‘#campaigns form’).serializeArray()

    Damit holt Jquery alle Values in dieser Form als Array, “bei radio oder checkbox types jeweils die aktivierten”…

    Yeah sehr hilfreich alles, danach hab ich lang gesucht.

    thx

  4. Genau das was ich gesucht habe. Man kann aber auch json_decode einfach als zweiten parameter ein true übergeben dann wird ein assoziatives Array zurückgegeben.

    Thx und Gruß Achim

Comments are closed.