communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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 浏览器执行
		xmlhttp=new XMLHttpRequest();
	}else{
		// IE6, IE5 浏览器执行
		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 中获取参数 q 的值
	$q=$_GET["q"];

	// 如果 q 参数存在则从 xml 文件中查找数据
	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;
	}

	// 输出结果
	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 标签</title>
<url>//m.sbmmt.com/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>//m.sbmmt.com/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>//m.sbmmt.com/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>//m.sbmmt.com/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>//m.sbmmt.com/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>//m.sbmmt.com/jsref/jsref-obj-array.html</url>
</link>
</pages>


Formation continue
||
<!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 浏览器执行 xmlhttp=new XMLHttpRequest(); }else{ // IE6, IE5 浏览器执行 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","5_2.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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492875 joue