Derniers tutoriels de développement web
 

AJAX PHP Exemple


AJAX est utilisé pour créer des applications plus interactives.


AJAX PHP Exemple

L'exemple suivant montrera comment une page Web peut communiquer avec un serveur Web tandis qu'un des caractères de type d'utilisateur dans un champ de saisie:

Exemple

Start typing a name in the input field below:

First name:

Suggestions:



Exemple Explained

Dans l'exemple ci - dessus, lorsqu'un utilisateur tape un caractère dans le champ de saisie, une fonction appelée "showHint()" est exécutée.

Cette fonction est déclenchée par le onkeyup événement.

Voici le code HTML:

Exemple

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Essayez - le vous - même »

Code de l'explication:

Tout d' abord, vérifier si le champ de saisie est vide (str.length == 0) . Si elle est, effacer le contenu du txtHint espace réservé et quitter la fonction.

Toutefois, si le champ de saisie ne soit pas vide, procédez comme suit:

  • Créer un XMLHttpRequest objet
  • Créer la fonction à exécuter lorsque la réponse du serveur est prêt
  • Envoyer la demande hors d'un fichier PHP (gethint.php) sur le serveur
  • Notez que q paramètre est ajouté gethint.php?q="+str
  • La str variable contient le contenu du champ d'entrée

Le fichier PHP - "gethint.php"

Le fichier PHP vérifie un tableau de noms, et renvoie le correspondant name(s) dans le navigateur:

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
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";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>