国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

PHP beginner's introduction to AJAX real-time search

AJAX can provide users with a more friendly and interactive search experience

In the following example, we will demonstrate a real-time search, and the search results can be obtained while you type the data

Compared with traditional search, real-time search has many advantages:

When typing data, matching results will be displayed

When you continue to typing data, the matching results will be displayed. Filter the results

If there are too few results, delete characters to get a wider range

Please see the following case

First we create a head.xml and the code is as follows

<!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 瀏覽器執(zhí)行
		xmlhttp=new XMLHttpRequest();
	}else{
		// IE6, IE5 瀏覽器執(zhí)行
		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>

Next we write the php file, the code is as follows:

<?php
	$xmlDoc=new DOMDocument();
	$xmlDoc->load("links.xml");
	$x=$xmlDoc->getElementsByTagName('link');
	// 從 URL 中獲取參數(shù) q 的值
	$q=$_GET["q"];

	// 如果 q 參數(shù)存在則從 xml 文件中查找數(shù)據(jù)
	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;
?>

Note:

If the input box is empty (str.length==0), this function will Clear the contents of the livesearch placeholder and exit the function.

If the input box is not empty, then showResult() will perform the following steps:

Create an XMLHttpRequest object

Create a function that is executed when the server response is ready

Send a request to the file on the server

Please pay attention to the parameter (q) added to the end of the URL (including the content of the input box)

You need to create a new links.xml and put it in the same file In the level directory, the code is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 標簽</title>
<url>http://miracleart.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 標簽</title>
<url>http://miracleart.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 屬性</title>
<url>http://miracleart.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 屬性</title>
<url>http://miracleart.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 對象</title>
<url>http://miracleart.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 對象</title>
<url>http://miracleart.cn/jsref/jsref-obj-array.html</url>
</link>
</pages>


Continuing Learning
||
<!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 瀏覽器執(zhí)行 xmlhttp=new XMLHttpRequest(); }else{ // IE6, IE5 瀏覽器執(zhí)行 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>
submitReset Code