Formulardaten per Ajax an Script übermitteln

[Klaus]

Hallo,

ich würde gerne ein PHP-Script mittels Ajax aufrufen und diesem die Formulardaten übergeben.
Bisher habe ich das immer (exemplarisch) so gemacht:

  
function update_basket() {  
	var req = createXMLHttpRequest();  
	req.onreadystatechange = function() {  
		switch(req.readyState) {  
			case 0:  
			case 1:  
			case 2:  
			case 3: return;  
			case 4: break;  
		}  
		resulttext = req.responseText;  
		document.getElementById('Ergebnisliste').innerHTML = resulttext;  
	}  
	req.open('get', 'templates/do_basketupdate.php?matnr=' + matnr + "&matbez=" + matbez);  
	req.send(null);  
}  

Da sich die Formulardaten aber nun deutlich vermehrt haben, frage ich mich, wie ich eventuell die ganzen Formulardaten in einem Rutsch übergeben kann (wie es auch bei einem Submit automatisch passiert).

Kann ich mir sparen, die ganzen Felder einzeln angeben zu müssen?

Klaus

[molily]

Kann ich mir sparen, die ganzen Felder einzeln angeben zu müssen?

Ja. Du kannst alle http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements eines Formulars mit einer Schleife durchlaufen und dir die Parameter-Paare aus deren jeweiligen Namen (name-Eigenschaft) und Wert (value-Eigenschaft) zusammenbauen. Die hängst du dann an den String an, am besten mit http://de.selfhtml.org/javascript/objekte/unabhaengig.htm#encode_uri_component@title=encodeURIComponent behandelt.

Je nach Feldtyp ist das aber komplizierter und es gibt verschiedene Dinge zu berücksichtigen. Schau dir einmal den Code von serialize aus jQuery an.

Mathias

[LX_unangemeldet]

Hallo, Klaus!

Was Du suchst, ist eine Formular-Serialisierung, also eine Funktion, die sich automatisch die Inhalte aus einem Formular herauszieht und in den POST-Daten-String konvertiert.

Verschiedene Toolkits bringen derartige Funktionen bereits mit, man kann sich aber mit etwas Aufwand auch eine eigene schreiben (hier nur für textuelle Inputs mit value, ich vertraue darauf, dass Du select-Felder, Radiobuttons, Checkboxen, selbst leicht einarbeiten kannst):

function formSerialize(form) {  
    if (!form.elements || form.elements.length) { return; }  
    var element, e=0, result=[];  
    while ((element=form.elements[e++])) {  
        result.push(escape(element.name)+'='+escape(element.value));  
    }  
    return result.join('&');  
}

Gruß, LX

[LX_unangemeldet]

Hallo, Klaus!

function formSerialize(form) {

if (!form.elements || !form.elements.length) { return; }

Hier fehlte ein Ausrufezeichen...  
  
Gruß, LX

[Don P]

Hallo LX,

if (!form.elements || !form.elements.length) { return; }[/code]
Hier fehlte ein Ausrufezeichen...

Jetzt hast du eins zuviel :P

if (!(form.elements && form.elements.length)) { return; }

DeMorgan lässt grüßen.

Don P

[LX]

Oder man nehme statt dem && ein ||, dann klappt es auch.

Gruß, LX

[Der Martin]

Hallo,

Oder man nehme statt dem && ein ||, dann klappt es auch.

das ist ja in etwa das, was DeMorgan sagt:

a && b == ! (!a || !b)

So kann jede ODER-Verknüpfung durch Hinzunahme von ausreichend vielen Negationen an den richtigen Stellen auf eine UND-Verknüpfung abgebildet werden (und umgekehrt).

Btw, du "kannst ja wieder". Was war das Problem? Könnte es andere Nutzer auch noch treffen?

Ciao,
 Martin

[Don P]

Hallo,

Oder man nehme statt dem && ein ||, dann klappt es auch.

Das || hattest du doch schon mit zwei Negationen.
Nimmt man aber &&, dann tut's auch eine einzige Negation:

!a || !b === !(a && b)

Gruß, Don P

[molily]

result.push(escape(element.name)+'='+escape(element.value));

Bitte nicht escape nutzen. escape kodiert Latin-1-Zeichen mit ISO-8859-1 und Zeichen außerhalb mit %uXXXX, wobei XXXX die hexadezimale Unicode-Nummer des Zeichens ist. Das Sonderzeichen % wird daher mit %25 kodiert, sodass man zwischen einem benutzerseitigen % und einem durch escape erzeugten %uXXXX unterscheiden kann.

encodeURIComponent ist da besser, weil es konsequent UTF-8 verwendet.
escape man m.E. eigentlich komplett vergessen.

Mathias