Formulare mit AJAX und jQuery – Ein kleines Tutorial

AJAX ist eine vom Prinzip her sehr einfache Technologie. Request mit JS abschicken, Anfrage mit serverseitigem Skript verarbeiten und Ergebnis wieder im Browser ausgeben bzw. anzeigen. Allerdings steckt der Teufel wie immer im Detail. Dieser Post ist eine kleine Anleitung wie man AJAX mit einem Formular einsetzen kann. Weit einfacher ist dies mit der Verwendung eines JS-Frameworks, hier jQuery.

So zunächste einmal der Standardaufbau in HTML für ein Formular.

^?View Code HTML

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

^?View Code CSS

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

^?View Code JAVASCRIPT

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done …

Demo

http://www.mysrc.de/wp-content/plugins/sociofluid/images/twitter_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/google_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/stumbleupon_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/delicious_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/digg_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/reddit_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/dzone_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/blinklist_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/blogmarks_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/furl_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/newsvine_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/technorati_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/magnolia_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/myspace_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/facebook_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/yahoobuzz_48.png

http://www.mysrc.de/wp-content/plugins/sociofluid/images/sphinn_48.png

27 Responses to “Formulare mit AJAX und jQuery – Ein kleines Tutorial”

Beebo on April 22nd, 2009
Hallo,
nettes Beispiel, vielen Dank. Eine Demo oder sowas in der Art wäre noch cool.
Grüße aus Berlin
Bee
Manuel Graf on Mai 21st, 2009
hm…
//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
//bei größeren Datenmengen.
Nicht wirklich. Es ist nicht umsonst generell Konvention, dass alle Speicherdaten etc mit Post versendet werden. Das http Protocol hat ja nicht aus Jux GET, POST, PUT, DELETE etc… Get sollte nur zur Contentanfrage benutzt werden, also beispielsweise http://www.mysite.de/suche?kategorie=news&seite=3 …
zudem ne kleine addition:
statt return false KANN man (den sinn habe ich noch nicht herausgefunden bzw danach gesucht, aber es scheint einen zu geben) auch event.preventDefault() verwenden. Vielleicht ermöglich das einfach nur ne bessere Struktur in jQuery selber.
so long,
Manuel Graf
Stefan Huissel on Mai 22nd, 2009
Danke euch für die Kommentare.
@Manuel: Ja, da gebe ich dir recht. POST und GET haben tatsächlich jeweils ihre eigene Daseinsberechtigung. Über die Notwendigkeit von PUT kann man sich aber streiten, oder?
Allerdings gab es zu deren Einführungszeit noch kein AJAX bzw. Requestobjekte. Da man die GET-Parameter ja bei einem XMLHTTP-Request sowieso nicht in der URL zu Gesicht bekommt, verhalten sich beide Datenübergabemethoden auch i.A. gleich. Ausser eben bei größeren Datenmengen..
Bei einem früheren Projekt hatte ich das “type=GET” nicht als Fehlerquelle angesehen und stundenlang am restlichen Code und dem PHP Teil rumgeschraubt bis ich entdeckte, dass GET und POST unterschiedliche Datenvolumen übertragen können.
Danke dir für den Tip mit dem Return Wert. Werde das mal testen.
@Beebo: Richten uns gerade ne Testumgebung in unserem Blog ein. Dann wirds auch endlich paar Demos geben
Greetz
Stef
peter on November 26th, 2009
wo ist die demo?
Stefan Huissel on November 26th, 2009
Die gibts jetzt hier..
Rick on Dezember 9th, 2009
Tolles Tutorial.
Endlich mal eines, was auch wirklich verständlich ist!
Danke!
Rick
P.S: Warum ist die mailaddi nötig, wenn ich Dir ein Lob übermitteln will?
Rick on Dezember 9th, 2009
Anmerkung:
Ich merke gerade, dass mir die saveData.php als Code fehlt

Stefan Huissel on Dezember 14th, 2009

Dank dir fürs Lob. Wenn ich zukünftig dann auch benutzerfreundlichere Formulare in Websites vorfinde, hat es sich gelohnt .

Der PHP Teil ist ganz simpel, ich mach demnächst mal kleines Downloadpackage fertig. Bis dahin poste den Code mal hier:

^?View Code PHP

<?php
    $text = $_POST['name'];
    $email = $_POST['email'];
    $comment = $_POST['comment'];
 
    //do some data saving stuff
    $allGood = saveMethod($text,$email,$comment);
 
    if($allGood){
        echo 1;
    }else{
        echo 2;
    }
 
function saveMethod($text,$email,$comment){
  //do some DB queries
  return true;
}
?>

Stefan on Dezember 27th, 2009
Vielen dank für dein ausführliches und verständliches HowTo. Man findet zwar so einieges was das Thema behandelt aber überall fehlt meistens die genaue Erklärung. Man möchte ja schon wissen was einem dort vorgeführt wird.
Danke
Robert on Januar 18th, 2010
Sehr gutes Tutorial, verständlich und einfach nachzuvollziehen. So müssen Tutorials aussehen! Genau das richtige für Leute wie mich, die sich mit dem Senden und Empfangen von Formulardaten noch nie auseinandersetzen mussten. Danke!
bi0s on März 9th, 2010
Beste erklärung die ich nach drei Stunden googeln gefunden habe
Vielen vielen dank dafür !
Hast mich noch vor dem schlimmsten bewahrt, sonst wäre ich durchgedreht..
Bin schon seit ein paar Stunden am Experimentieren
Ingo Fahrentholz on April 26th, 2010
Suuuper danke dafür !!!
Nickel715 on Juni 26th, 2010
es hat zwar auf anhieb nicht funktioniert aber nach dem ich dann alle fehler im code gefixt habe gings… danke für das simple tutorial
dude76 on Juli 14th, 2010
Hi,
finde das Tutorial auch super. Habe nur folgendes
Problem:
Ich möchte ein Formular innerhalb eines DIV das als Overlay angezeigt wird an den Server per POST verschicken.
Wie mache ich das die Ausgabe wieder direkt in diesem DIV erscheint, so das keine neue Seite
geladen wird?
mirage2000 on Juli 23rd, 2010
sieht gut aus hab auch getestet nur bei mir kommt ständig fehler, dass angeblich nicht geschickt werden konnte.
was bedeutet die hier:
//wenn saveData.php true bzw. den Status 1 zurückliefert
if (reqCode==1) {….
was muss savedata.php zurückliefern?
Stefan Huissel on Juli 27th, 2010
Das ist die Antwort des PHP-Skripts. Alles war in php mittels echo ausgegeben wird, landet in diesem Fall in der js-Variablen reqCode. Die 1 ist sozusagen eine Minimalform des geplanten Error-Handling, wobei 1 kein Fehler bedeutet.
Bei dir scheint es ein Problem im PHP-Teil zu geben. Der nicht unbedingt beste, aber schnellste Weg wäre es einfach den reqCode mittels einem js-alert innerhalb von “success” auszugeben. Da würdest du dann vom Skript nicht abgefangene PHP Fehlermeldungen sehen können.
Greetz
Thomas on November 18th, 2010
Kann ich eigentlich den PHP Code zusammen mit dem jQuery Code in eine Datei packen?
Stefan Huissel on November 19th, 2010
Kommt drauf an was du vorhast. Also den PHP Code in eine JS-Datei schreiben geht nicht, da eine Javscript Datei nicht auf dem Server ausgeführt wird. Und nur da läuft nunmal PHP..
Abgesehen davon ist es aber in dersselben Datei durchaus möglich. Der Ajax Request bleibt so bestehen und nur der “url” Parameter ändert sich. Dann müsstest du aber im PHP Teil abragen ob ein Ajax-Request ankommt. So ungefähr in der Form:
^?View Code PHP
1
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
Hoffe das bringt dich in die richtige Richtung…
trigang on April 13th, 2011
Hey, Stefan!
Hab echte Probleme,
Es funktioniert bei mir einfach nicht, wenn ich das Coding 1 zu 1 aus dem Internetübernehme kommt immer “Fehler beim Abschicken des Formulares”.
Ich denke ich baus immer falsch zusammen. Kannst du mir dein Script zum Download bereitstellen?
Oder es wird direkt zur saveData verlinkt
trigang on April 13th, 2011
am besten das mit der checkbox. Das hab ich auch schon versucht “herunterzuladen” d.h abzuspeichern ohne Erfolg
trigang on April 13th, 2011
Hat sich erledigt!
Hatte in der PHP Datei zusätzlich HTML Elemente …
Es darf nur das reine php darin stehen
Super Coding!
Tobias on Juni 19th, 2011
Ich weiß nicht genau woran das liegt, aber bei mir kommen in der php datei die Variablen nicht an. Aus dem Grund kann ich sie auch nicht validieren und bekomme grundsätzlich eine Fehlermeldung. Kann mir jemand erklären woran das liegt?
Peter on Juli 14th, 2011
Vielen Dank. Endlich mal ein gutes Tutorial zu dem Thema!
@Tobias
Hast du die Variablen vielleicht abgeändert?
andi on August 30th, 2011
Sers,
erstmal vielen Dank für das Tutorial, schnell und gut.
Jetzt habe ich allerdings schon das zweite mal mit genau der Vorlage mich halbtot gesucht nach dem Fehler, vielleicht solltest du das schnell anpassen: Im Javascript-Teil ganz oben fehlt vor (‘#submit’)… das Dollarzeichen für jQuery.
Grüße
Andi
seriously on Januar 19th, 2012
all those exellent demos come along really simple – but all of them lack any comment about the php – and how to deal with it and how to implement it and what better not to do about it …. iivested a whole day and stumbled 4 times becaurse i did not get the php – settings straight. cant please anybody of you geeks please say some more words about php? Thats is the core of it. Why is nobody reflecting that accordingly? h