AJAX PHP Beispiel

AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.

AJAX PHP Beispiel

Nachfolgendes Beispiel zeigt, wie eine Webseite mit einem Webserver kommuniziert, wenn der Benutzer Zeichen in das Eingabefeld eingibt:

Beispiel

Bitte geben Sie die Buchstaben A-Z im folgenden Eingabefeld ein:

Name:

Suchvorschläge:

Erklärung des Beispiels

Im obigen Beispiel wird die Funktion "showHint()" ausgeführt, wenn der Benutzer Zeichen in das Eingabefeld eingibt.

Diese Funktion wird durch das Ereignis onkeyup ausgelöst.

Nachfolgend ist der HTML-Code:

Beispiel

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Bitte geben Sie den Namen in das folgende Eingabefeld ein:</b></p>
<form> 
Nachname oder Vorname:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Vorschlag:<span id="txtHint"></span></p>
</body>
</html>

Probieren Sie es selbst aus

Code-Übersetzung:

Überprüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0），falls ja, leeren Sie den Inhalt des Platzhalters "txtHint" und beenden Sie die Funktion.

Wenn jedoch das Eingabefeld nicht leer ist, wird folgendes ausgeführt:

  • Erstellen Sie ein XMLHttpRequest-Objekt
  • Erstellen Sie eine Funktion, die ausgeführt wird, wenn der Server bereit ist
  • Senden Sie eine Anfrage an die PHP-Datei (gethint.php) auf dem Server
  • Bitte fügen Sie den Parameter "q" zu gethint.php hinzu
  • Die Variable "str" speichert den Inhalt des Eingabefelds

PHP-Datei - "gethint.php"

Diese PHP-Datei überprüft die Name-Array und gibt dann die entsprechenden Namen an den Browser zurück:

<?php
// Name Array
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// q-Parameter aus der URL holen
$q = $_REQUEST["q"];
$hint = "";
// Alle hint im Array überprüfen, ob $q mit "" identisch ist
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
         }
    }
}
// "keine Vorschläge" ausgeben, wenn hint nicht gefunden wurde oder den richtigen Wert ausgeben
  echo $hint === "" ? "keine Vorschläge" : $hint;
?>
c.html" -->