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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(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

Ähnliche Artikel

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

  1. 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

  2. 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

  3. 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

  4. peter  on November 26th, 2009

    wo ist die demo?

  5. Stefan Huissel  on November 26th, 2009

    Die gibts jetzt hier..

  6. 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? ;-)

  7. Rick  on Dezember 9th, 2009

    Anmerkung:
    Ich merke gerade, dass mir die saveData.php als Code fehlt :-(

  8. 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
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <?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;
}
?>

  9. 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

  10. 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!

  11. 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 ;)

  12. Ingo Fahrentholz  on April 26th, 2010

    Suuuper danke dafür !!!

  13. 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

  14. 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?

  15. 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?

  16. 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


Kommentare