>  기사  >  백엔드 개발  >  PHP 예제 - AJAX 실시간 검색에 대한 지식

PHP 예제 - AJAX 실시간 검색에 대한 지식

jacklove
jacklove원래의
2018-05-07 15:03:531265검색

AJAX는 사용자에게 보다 친숙하고 대화형 검색 경험을 제공할 수 있습니다. 이 기사에서는 AJAX 실시간 검색에 대한 관련 지식을 설명합니다.

AJAX 실시간 검색

다음 예에서는 실시간 검색을 시연하며, 데이터를 입력하는 동안 검색 결과를 얻을 수 있습니다.

기존 검색과 비교하여 실시간 검색에는 다음과 같은 많은 장점이 있습니다.

데이터를 입력하면 일치하는 결과가 표시됩니다.

데이터를 계속 입력하면 결과를 필터링하세요.

결과가 너무 적으면 삭제하세요. 캐릭터는 다음을 수행할 수 있습니다. 더 넓은 범위를 얻으세요

HTML이 포함된 페이지를 검색하려면 아래 텍스트 상자에 "HTML"을 입력하세요.

위 예의 결과는 XML 파일(links.xml)에서 찾을 수 있습니다. 이 예제를 작고 단순하게 유지하기 위해 6개의 결과만 제공합니다.

예제 설명 - HTML 페이지

사용자가 위의 입력 상자에 문자를 입력하면 "showResult()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

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

소스 코드 설명:

입력 상자가 비어 있는 경우(str.length==0) 이 함수는 실시간 검색 자리 표시자의 내용을 지우고 종료합니다. 기능 .

입력 상자가 비어 있지 않으면 showResult()는 다음 단계를 수행합니다.

XMLHttpRequest 객체 생성

서버 응답이 준비되면 실행되는 함수 생성

서버의 파일로 요청 보내기

URL 추가시 참고하세요. 마지막에 있는 매개변수(q)(입력 상자의 내용 포함)

PHP 파일

위 문단에서 JavaScript이 호출한 서버 페이지는 " livesearch.php".

"livesearch.php"의 소스 코드는 XML 파일에서 검색 string과 일치하는 헤더를 검색하고 결과를 반환합니다.

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

JavaScript가 텍스트(예: strlen($q) > 0)를 보내는 경우,

XML 파일을 새 XML DOM 개체에 로드합니다.

모든 b2386ffb911b14667cb8f0f91ea547a7 요소를 반복하여 전달된 JavaScript와 일치하는 텍스트를 찾습니다.

"$response"에 올바른 URL과 제목을 설정합니다. 변하기 쉬운. 일치하는 항목이 두 개 이상 발견되면 모든 일치 항목이 변수에 추가됩니다.

일치하는 항목이 없으면 $response 변수를 "제안 없음"으로 설정하세요.

이 글에서는 AJAX 실시간 검색과 관련된 지식을 자세히 설명하고 있으니 더 많은 학습자료를 보시려면 PHP 중국어 홈페이지를 참고해주세요.

관련 권장 사항:

PHP 정보 예 - AJAX와 XML 간의 상호 작용

PHP 정보 - AJAX와 MySQL 간의 상호 작용

PHP 정보 - AJAX와 PHP 간의 연결

위 내용은 PHP 예제 - AJAX 실시간 검색에 대한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.