Introduction à la recherche en temps réel AJAX pour débutants PHP
AJAX peut offrir aux utilisateurs une expérience de recherche plus conviviale et interactive
Dans l'exemple suivant, nous allons démontrer une recherche en temps réel et obtenir les résultats de la recherche pendant que vous tapez les données
Par rapport à la recherche traditionnelle, la recherche en temps réel présente de nombreux avantages?:
Lors de la saisie des données, les résultats correspondants seront affichés
Lorsque vous continuez à saisir des données, les résultats correspondants seront affichés. Filtrer. les résultats
S'il y a trop peu de résultats, supprimez des caractères pour obtenir une plage plus large
Veuillez consulter le cas suivant
Nous créons d'abord un head.xml et le code est comme suit
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function showResult(str){
if (str.length==0){
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 瀏覽器執(zhí)行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","demo.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>Ensuite, nous écrivons le fichier php, le code est le suivant?:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 從 URL 中獲取參數(shù) q 的值
$q=$_GET["q"];
// 如果 q 參數(shù)存在則從 xml 文件中查找數(shù)據(jù)
if (strlen($q)>0){
$hint="";
for($i=0; $i<($x->length); $i++){
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1){
// 找到匹配搜索的鏈接
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)){
if ($hint==""){
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}else{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// 如果沒找到則返回 "no suggestion"
if ($hint==""){
$response="no suggestion";
}else{
$response=$hint;
}
// 輸出結(jié)果
echo $response;
?>Remarque?:
Si la zone de saisie est vide (str.length==0 ), cette fonction effacera le contenu de l'espace réservé livesearch et quittera la fonction.
Si la zone de saisie n'est pas vide, alors showResult() effectuera les étapes suivantes?:
Créer un objet XMLHttpRequest
Créer une fonction à exécuter lorsque le serveur répond est prêt
Envoyer une requête au fichier sur le serveur
Veuillez faire attention au paramètre (q) ajouté à la fin de l'URL (y compris le contenu de la zone de saisie)
Vous devez créer un nouveau links.xml et le mettre dans le même fichier. Dans le répertoire level, le code est le suivant :
<?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a 標(biāo)簽</title> <url>http://ipnx.cn/tags/tag-a.html</url> </link> <link> <title>HTML br 標(biāo)簽</title> <url>http://ipnx.cn/tags/tag-br.html</url> </link> <link> <title>CSS background 屬性</title> <url>http://ipnx.cn/cssref/css3-pr-background.html</url> </link> <link> <title>CSS border 屬性</title> <url>http://ipnx.cn/cssref/pr-border.html</url> </link> <link> <title>JavaScript Date 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-date.html</url> </link> <link> <title>JavaScript Array 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-array.html</url> </link> </pages>
