In diesem Beispiel wird gezeigt, wie der Inhalt von Formularelementen z.B. aus einer Datenbank nachgeladen werden kann.

Mit der Javascript-Bibliothek jQuery lässt sich ohne großen Aufwand eine einfache Ajax-Anwendung realisieren. Im folgenden gehe ich davon aus, dass in die aufgerufene Seite bereits das jQuery-Framework eingebunden wurde (hier kann das Einbinden nachgelesen werden). Dies ist notwendig, damit das nachfolgende Beispiel funktioniert.

Für was benötige ich die Ajax-Technologie?

Mit der Ajax-Technologie können Seiteninhalte nachgeladen werden, ohne dass diese komplett neu geladen werden muss. In diesem Beispiel werden Daten aus z.B. einer MySQL-Datenbank in ein Formular geladen. Ein Anwendungsgebiet dieses Scripts wäre zum Beispiel ein Änderungsformular eines bereits gespeicherten Textes. Über das erste Auswahlmenü wird der Text ausgewählt, das zweite Auswahlmenü soll dann eine Bewertung anzeigen und im Textfeld soll der Text zum Bearbeiten stehen. Mit diesem Aufbau würde dem Autor des Textes die Bearbeitung angenehm gestaltet werden.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben: 

 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

<script type="text/javascript">
<!--
function onSelectChange(){
    var dropdown = document.getElementById("select1");
    var index = dropdown.selectedIndex;
    var val = dropdown.options[index].value;

    if (val != 0) {     
        $.ajax({
             type: "GET",
             url: "nachladen.php?get=text&id="+val,
             data: "data",
             success: function(data){
                 $('#textarea').empty();
                 document.getElementById("textarea").value = data;
             }
         });

         $.ajax({
             type: "GET",
             url: "nachladen.php?get=select&id="+val,
             data: "data",
             success: function(data){
                 document.getElementById("select2").value = data;
             }
         });
    } else {
        document.getElementById("textarea").value = "";
        document.getElementById("select2").value = "1";
    }
}
//-->
</script>

Folgender Code wird dorthin geschrieben, wo später die Ausgabe des PHP-Scripts erscheinen soll: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<select name="select1" id="select1" onchange="onSelectChange();">
    <option value="0" selected="selected">Bitte wählen</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<select name="select2" id="select2">
    <option value="1" selected="selected">Nummer 1</option>
    <option value="2">Nummer 2</option>
    <option value="3">Nummer 3</option>
    <option value="4">Nummer 4</option>
    <option value="5">Nummer 5</option>
</select>

<textarea id="textarea" name="textarea" cols="79" rows="5"></textarea>

Erklärung

Im head-Bereich wird das Javascript ausgeführt, das die Daten aus dem PHP-Script nachlädt. Als Parameter wird der ausgewählte Wert des Select-Feldes übergeben, sowie eine Variable, die beinhaltet, für welches Formularelement der Aufruf ausgeführt wird.
Im PHP-Script kann dann z.B. eine MySQL-Abfrage ausgeführt werden. Per echo-Befehl werden die Daten dann wieder an Javascript übergeben, und in die Variable data geschrieben. Nun wird nur noch der Inhalt der Variable data in das jeweilige Element geschrieben, bzw. der Wert des jeweiligen Elements verändert.

Demo