suchen

Heim >Backend-Entwicklung >PHP-Tutorial >PHP-Beispiel – Kenntnisse über AJAX-Echtzeitsuche

PHP-Beispiel – Kenntnisse über AJAX-Echtzeitsuche

jacklove
jackloveOriginal
2018-05-07 15:03:531297Durchsuche

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(&#39;link&#39;);// 从 URL 中获取参数 q 的值$q=$_GET["q"];// 如果 q 参数存在则从 xml 文件中查找数据if (strlen($q)>0){    $hint="";    for($i=0; $i<($x->length); $i++)    {        $y=$x->item($i)->getElementsByTagName(&#39;title&#39;);        $z=$x->item($i)->getElementsByTagName(&#39;url&#39;);        if ($y->item(0)->nodeType==1)        {            // 找到匹配搜索的链接            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))            {                if ($hint=="")                {                    $hint="<a href=&#39;" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "&#39; target=&#39;_blank&#39;>" .                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";                }                else                {                    $hint=$hint . "<br /><a href=&#39;" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "&#39; target=&#39;_blank&#39;>" .                     $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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über PHP-Beispiele – AJAX- und XML-InteraktionNächster Artikel：Über PHP-Beispiele – AJAX- und XML-Interaktion

In Verbindung stehende Artikel

Mehr sehen