PHP 초보자를 위한 AJAX 실시간 검색 입문

AJAX는 사용자에게 더욱 친숙하고 대화형 검색 환경을 제공할 수 있습니다

다음 예에서는 실시간 검색을 시연하고 사용자가 데이터를 입력하는 동안 검색 결과를 얻습니다.

기존 검색에 비해 실시간 검색에는 많은 장점이 있습니다.

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

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

결과가 너무 적을 경우 문자를 삭제하여 범위를 넓힙니다

다음 사례를 참조하세요

먼저 head.xml을 생성하고 코드는 다음과 같습니다. 다음과 같이

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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","demo.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>

다음으로 PHP 파일을 작성하고 코드는 다음과 같습니다.

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

참고:

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

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

XMLHttpRequest 객체 생성

서버 응답 시 실행할 함수 생성 준비됨

서버에 있는 파일에 요청 보내기

URL 끝에 추가된 매개변수(q)(입력 상자의 내용 포함)에 주의하세요

links.xml을 새로 만들어 같은 파일에 넣어야 합니다. 레벨 디렉터리에서 코드는 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 标签</title>
<url>//m.sbmmt.com/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>//m.sbmmt.com/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>//m.sbmmt.com/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>//m.sbmmt.com/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>//m.sbmmt.com/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>//m.sbmmt.com/jsref/jsref-obj-array.html</url>
</link>
</pages>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <meta charset="utf-8"> <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","5_2.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>

제출하다 코드 재설정

자동운전