Comment implémenter la barre de recherche avec AJax

Cette fois je vais vous montrer comment implémenter la barre de recherche avec AJax, et quelles sont les précautions pour implémenter la barre de recherche avec AJax. Voici un cas pratique, jetons un oeil.

Pendant le processus de stage, j'avais besoin d'utiliser la fonction de soumission asynchrone, j'ai donc essayé de comprendre ajax, j'ai immédiatement senti que ce que j'avais appris auparavant était vraiment une goutte d'eau dans l'océan. développement d'applications Web, si vous ne connaissez pas jquery et ajax, alors c'était vraiment une perte de temps. Après l'avoir compris, j'ai senti que toutes les fonctions sophistiquées d'Internet pouvaient être réalisées.

Sans plus tarder, voici ajax pour implémenter une simple fonction de barre de recherche Baidu Lorsque l'utilisateur tape des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementByIdx_x("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

Explication du code source :

Si la zone de saisie est vide (str.length==0) , puis la fonction efface le contenu de l'espace réservé txtHint et quitte la fonction .

Si la zone de saisie n'est pas vide, la fonction showHint() effectue les tâches suivantes :

Crée un objet XMLHttpRequest

Exécute la fonction lorsque la réponse du serveur est prête

🎜>

Demander un fichier envoyé au serveur

Veuillez noter que nous avons ajouté un paramètre q (avec le contenu de la zone de saisie) à l'URL

Le fichier demandé est écrit en php, bien sûr, tout va bien, et il n'y a pas de différence essentielle avec les pages ordinaires :

<?php
// 用名字来填充数组
$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";
//获得来自 URL 的 q 参数
$q=$_GET["q"];
//如果 q 大于 0，则查找数组中的所有提示
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment Ajax lit le txt et affiche son contenu dans les pages

Ajax traverse jSon pour la modification des données et suppression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!