So implementieren Sie eine Suchleiste mit AJax

Dieses Mal zeige ich Ihnen, wie Sie die Suchleiste mit AJax implementieren und welche Vorsichtsmaßnahmen für die Implementierung der Suchleiste mit AJax gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Während des Praktikums musste ich die asynchrone Einreichungsfunktion verwenden, also habe ich versucht, etwas über Ajax zu lernen Webanwendungsentwicklung: Wenn Sie JQuery und Ajax nicht kennen, dann war es wirklich Zeitverschwendung. Nachdem ich es verstanden hatte, hatte ich das Gefühl, dass alle ausgefallenen Funktionen im Internet realisiert werden können.

Hier ist ohne weiteres Ajax zum Implementieren einer einfachen Baidu-Suchleistenfunktion. Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showHint()“ ausgeführt. Diese Funktion wird durch das Ereignis „onkeyup“ ausgelöst:

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();
}

Erklärung des Quellcodes:

Wenn das Eingabefeld leer ist (str.length==0) , dann löscht die Funktion den Inhalt des txtHint-Platzhalters und beendet die Funktion .

Wenn das Eingabefeld nicht leer ist, führt die Funktion showHint() die folgenden Aufgaben aus:

Erstellt ein XMLHttpRequest-Objekt

Führt die Funktion aus, wenn die Serverantwort bereit ist

Anfordern einer an den Server gesendeten Datei

Bitte beachten Sie, dass wir der URL einen Parameter q (mit dem Inhalt des Eingabefelds) hinzugefügt haben

Die angeforderte Datei wird geschrieben php, natürlich alles in Ordnung, und es gibt keinen wesentlichen Unterschied zu normalen Seiten:

<?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;
?>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Ajax Text liest und seinen Inhalt in Seiten anzeigt

Ajax durchläuft jSon zur Datenänderung und Löschung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Suchleiste mit AJax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!