AJAX PHP voorbeeld
AJAX word gebruik om meer interaktiewe toepassings te skep.
AJAX PHP voorbeeld
Die volgende voorbeeld demonstreer hoe 'n webblad met 'n webbediener kan kommunikeer terwyl 'n gebruiker karakters in 'n invoerveld tik:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
First name:
Voorbeeld Verduidelik
In die voorbeeld hierbo, wanneer 'n gebruiker 'n karakter in die invoerveld tik, word 'n funksie genaamd showHint()
uitgevoer.
Die funksie word deur die onkeyup
gebeurtenis geaktiveer.
Hier is die kode:
Voorbeeld
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "gethint.php?q=" + str);
xmlhttp.send();
}
}
</script>
Kode verduideliking:
Kyk eers of die invoerveld leeg is (str.length == 0). As dit is, maak die inhoud van die txtHint-plekhouer skoon en verlaat die funksie.
As die invoerveld egter nie leeg is nie, doen die volgende:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n PHP-lêer (gethint.php) op die bediener
- Let daarop dat q parameter bygevoeg word gethint.php?q="+str
- Die str-veranderlike hou die inhoud van die invoerveld
Die PHP-lêer - "gethint.php"
Die PHP-lêer kontroleer 'n verskeidenheid name, en gee die ooreenstemmende naam (name) terug na die blaaier:
<?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;
?>