Ajax mit JQuery und PHP

Codeschnipsel

Bedeutet nicht unbedingt mehr Aufwand, JQuery und PHP Bedeutet nicht unbedingt mehr Aufwand, JQuery und PHP
Mit diesen Codeschnipsel zeigen wir kurz, wie man mit JQuery, PHP und ein wenig CSS einen Ajax Request auslösen kann. Im behandelten Beispiel geht es darum, dass wir Formulardaten mittels "POST" verabeiten und das Resultat gleich in die Homepage einbinden. Ein funktionierendes Beispiel findet ihr nach dem Break. Als erstes das Formular:

Das Formular
1
2
3
4
5
6
7
8
9
<form id="formendrucken" action="?tutorial=formendrucken" method="post">
<h3 id="formendrucken">Formular</h3>
<label for="dreieck">Dreieck</label><input id="dreieck" name="form" type="checkbox" value="dreieck" checked="checked" />
<label for="viereck">Viereck</label><input id="viereck" name="form" type="checkbox" value="viereck" />
<h3>Wieviele Zeichen sollen verwendet werden?</h3>
<label for="anzahl">Anzahl</label><input id="anzahl" name="anzahl" value="10" type="text" />
<input type="submit" name="submit" value="Zeichnen" />
<span id="formendruckenajax">Mit AJAX <small>(Mauszeiger drüber halten)</small></span>
</form>

Die PHP Datei:

Leider zerreissen mir die echo Befehle das Layout. Hier könnt ihr die Datei trotzdem betrachten.

Das Javascript File:

topics.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Das Formendrucken Skript mit Ajax
$('span#formendruckenajax').hover(function(){
// Die Formulardaten in ein Array kopieren
var formvalues = $('#formendrucken').serializeArray();
// Der Ajax Teil
$.post(
// Die Angaben werden an unser eigentliches Script geschickt
"/codeschnipsel/tutorial/formendrucken.html",
// Die Formulardaten
{form:formvalues[0].value,anzahl:formvalues[1].value},
// Was mit den erhaltenen Daten passiert
function(data){
// Das zuvor ausgeblendete Div soll mit den erhaltenen
// Daten gefüllt werden und anschliessend eingeblendet werden
$('#formendruckendisplay').html(data).fadeIn();
}
);
});
// Blendet die Ausgabe vom Formendruck wieder aus
$("#formendruckendisplay").click(function(){
$(this).fadeOut();
});

Wie man sieht, wird das Resultat der Abfrage (data) in ein div mit der id "formendruckendisplay" geladen. Dieses befindet sich standardmässig irgendwo im Quelltext und besitzt das Attribut "dispaly:none;". Es wird erst angezeigt wenn die Daten geladen werden und verschwindet wieder wenn man hineinklickt.

#formendruckendisplay
1
2
3
4
5
6
7
8
9
#formendruckendisplay {
background-color:white;
border:1px solid black;
display:none;
position:fixed;
right:20px;
top:20px;
z-index:16;
}

Wer möchte, kann auf unserer Demoseite das Resultat betrachten.

Kommentar schreiben