Heim > Artikel > Backend-Entwicklung > PHP-Beispiel – Kenntnisse über AJAX-Echtzeitsuche
PHP-Beispiel – Kenntnisse über AJAX-Echtzeitsuche
- jackloveOriginal
- 2018-05-07 15:03:531265Durchsuche
AJAX kann Benutzern ein benutzerfreundlicheres und interaktiveres Sucherlebnis bieten. In diesem Artikel werden die relevanten Kenntnisse der AJAX-Echtzeitsuche erläutert.
AJAX Live Search
Im folgenden Beispiel demonstrieren wir eine Echtzeitsuche, und Sie können die Suchergebnisse erhalten, während Sie die Daten eingeben.
Im Vergleich zur herkömmlichen Suche bietet die Echtzeitsuche viele Vorteile:
Beim Eingeben von Daten werden übereinstimmende Ergebnisse angezeigt.
Wenn Sie mit der Eingabe von Daten fortfahren, filtern Sie die Ergebnisse
Wenn es zu wenige Ergebnisse gibt, entfernen Sie Zeichen, um einen größeren Bereich zu erhalten
Geben Sie „HTML“ in das Textfeld unten ein, um nach Seiten zu suchen, die HTML enthalten:
Die Ergebnisse im obigen Beispiel befinden sich in einer XML-Datei (links.xml). Um dieses Beispiel klein und einfach zu halten, liefern wir nur 6 Ergebnisse.
Erläuterung der Beispiele – HTML-Seite
Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showResult()“ ausgeführt. Diese Funktion wird durch das Ereignis „onkeyup“ ausgelöst:
<html><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","livesearch.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>Erklärung des Quellcodes:
Wenn das Eingabefeld leer ist (str.length==0), wird dies Die Funktion löscht den Inhalt des Livesearch-Platzhalters und beendet die Funktion.
Wenn das Eingabefeld nicht leer ist, führt showResult() die folgenden Schritte aus:
Erstellen eines XMLHttpRequest-Objekts
Erstellen einer Funktion, die ausgeführt werden soll, wenn der Server antwortet ist bereit
Senden Sie eine Anfrage an die Datei auf dem Server
Bitte beachten Sie den am Ende der URL hinzugefügten Parameter (q) (enthält den Inhalt des Eingabefelds)
PHP-Datei
Der obige Absatz Die über JavaScript aufgerufene Serverseite ist eine PHP-Datei mit dem Namen „livesearch.php“. Der Quellcode in
„livesearch.php“ durchsucht die XML-Datei nach Headern, die mit der Such-Zeichenfolge übereinstimmen, und gibt das Ergebnis zurück:
<?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;?>wenn JavaScript Text gesendet hat ( d. h. strlen($q) > 0), was passieren wird:
Laden Sie die XML-Datei in ein neues XML-DOM-Objekt
Durchlaufen Sie alle b2386ffb911b14667cb8f0f91ea547a7-Elemente, um passende JavaScript-Elemente zu finden Der übergebene Text
setzt die richtige URL und den richtigen Titel in der Variablen „$response“. Wenn mehr als eine Übereinstimmung gefunden wird, werden alle Übereinstimmungen zur Variablen hinzugefügt.
Wenn keine Übereinstimmung gefunden wird, setzen Sie die Variable $response auf „kein Vorschlag“.
In diesem Artikel werden die Kenntnisse im Zusammenhang mit der AJAX-Echtzeitsuche ausführlich erläutert. Weitere Lernmaterialien finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Über PHP-Beispiel – Interaktion zwischen AJAX und XML
Über PHP – Zwischen AJAX und MySQL-Interaktion
Über PHP – Die Verbindung zwischen AJAX und PHP
Das obige ist der detaillierte Inhalt vonPHP-Beispiel – Kenntnisse über AJAX-Echtzeitsuche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)