masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pengenalan PHP pemula kepada carian masa nyata AJAX

AJAX boleh memberikan pengguna pengalaman carian yang lebih mesra dan interaktif

Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan mendapatkan hasil carian semasa anda menaip data

Berbanding dengan carian tradisional, carian masa nyata mempunyai banyak kelebihan:

Apabila menaip data, hasil yang sepadan akan dipaparkan

Apabila anda terus menaip data, hasil yang sepadan akan dipaparkan hasilnya

Jika terdapat terlalu sedikit hasil, padamkan aksara untuk mendapatkan julat yang lebih luas

Sila lihat kes berikut

Mula-mula kita buat head.xml dan kodnya ialah seperti berikut

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

Seterusnya kita menulis fail php, kodnya adalah seperti berikut: 

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

Nota:

Jika kotak input kosong (str.length==0 ), fungsi ini akan Kosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.

Jika kotak input tidak kosong, maka showResult() akan melakukan langkah berikut:

Buat objek XMLHttpRequest

Buat fungsi untuk dilaksanakan apabila respons pelayan sudah sedia

Hantar permintaan ke fail pada pelayan

Sila beri perhatian kepada parameter (q) yang ditambahkan pada penghujung URL (termasuk kandungan kotak input)

Anda perlu mencipta pautan.xml baharu dan meletakkannya dalam fail yang sama Dalam direktori tahap, kodnya adalah seperti berikut: 

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492446 permainan