masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial asas pembangunan PHP AJAX dan PHP

Contoh AJAX dan PHP

Satu ringkasan ayat: AJAX digunakan untuk mencipta aplikasi yang lebih interaktif

Contoh berikut akan menunjukkan cara halaman web berkomunikasi dengan pelayan web apabila pengguna menaip aksara dalam kotak input:

Kesan halaman ditunjukkan dalam gambar di sebelah kanan

Penjelasan contoh - halaman HTML

Apabila pengguna menaip aksara dalam kotak input di atas, fungsi "showHint()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup":

Nota: peristiwa onkeyup berlaku apabila kekunci papan kekunci dilepaskan

Kod khusus adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
	//如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。
	if(str.length==0){
		document.getElementById("txtHint").innerHTML="";
		return;
	}
	//如果输入框不是空的，那么 showHint() 会执行以下代码：
	//创建XMLHttpRequest对象
	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("txtHint").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在输入框中输入一个姓名</b></p>
<form>
<!-- onkeyup 事件会在键盘按键被松开时发生，键盘松开时，调用showHint()函数-->
姓名：<input type="text" onkeyup="showHint(this.value)">
<p>返回值：<span id="txtHint"></span></p>
</form>
</body>
</html>

Penjelasan kod sumber :

Jika kotak input kosong (str.length==0), fungsi ini akan mengosongkan kandungan pemegang tempat txtHint dan keluar dari fungsi.

Jika kotak input tidak kosong, maka showHint() akan melaksanakan langkah berikut:

Buat objek XMLHttpRequest

Buat fungsi untuk dilaksanakan apabila respons pelayan sudah sedia

Hantar permintaan ke fail pada pelayan

Sila ambil perhatian parameter (q) yang ditambahkan pada penghujung URL (mengandungi kandungan kotak input)

Penjelasan contoh - Fail PHP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "2.php".

Kod sumber dalam "2.php" akan menyemak tatasusunan nama dan kemudian mengembalikan nama yang sepadan kepada penyemak imbas Kod tersebut adalah seperti berikut: 

<?php
// 将姓名填充到数组中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
$a[]="小明";

//从请求URL地址中获取 q 参数
$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
	$hint="";
	for($i=0; $i<count($a); $i++)
	{
		//将$a数组和$q全部转换为小写，然后逐个取出$a,截取与$q相同长度，比较是否相同，相同放入$hint中
		if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
		{
			if ($hint=="")
			{
				$hint=$a[$i];
			}
			else
			{
				$hint=$hint." , ".$a[$i];
			}
		}
	}
}

// 如果没有匹配值设置输出为 "no suggestion" 
if ($hint == "")
{
	$response="no suggestion";
}
else
{
	$response=$hint;
}

//输出返回值
echo $response;
?>

Penjelasan: <🎜. >

Jika JavaScript menghantar sebarang teks (iaitu strlen($q) > 0), ini berlaku:

Cari nama yang sepadan dengan aksara yang dihantar oleh JavaScript

Jika tidak padanan ditemui, kemudian tetapkan rentetan respons kepada "tiada cadangan"

Jika satu atau lebih nama yang sepadan ditemui, kemudian tetapkan rentetan respons dengan semua nama

Hantar respons kepada "txtHint " pemegang tempat

Pengalaman pembelajaran

Contoh ini terutamanya termasuk perkara pengetahuan berikut:

  • Asas borang

  • Acara onkeyup: apabila kekunci papan kekunci dikeluarkan

  • panggilan fungsi, pemindahan nilai fungsi

  • penciptaan objek AJAX XMLHttpRequest, fungsi yang dilaksanakan apabila pelayan bertindak balas dan pemindahan nilai ​​ke pelayan Permintaan penghantaran fail: Lihat 1-5 untuk pengalaman pembelajaran

  • kaedah HTML DOM getElementById(): Mengembalikan rujukan kepada objek pertama dengan ID yang ditentukan

  • Kaedah tugasan tatasusunan

  • Dapatkan penyerahan borang kaedah

Fungsi yang berkaitan dengan rentetan:

  • strlen()

  • count()

  • Strtolower()

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showHint(str){ //如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。 if(str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } //如果输入框不是空的，那么 showHint() 会执行以下代码： //创建XMLHttpRequest对象 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("txtHint").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><b>在输入框中输入一个姓名</b></p> <form> <!-- onkeyup 事件会在键盘按键被松开时发生，键盘松开时，调用showHint()函数--> 姓名：<input type="text" onkeyup="showHint(this.value)"> <p>返回值：<span id="txtHint"></span></p> </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)  492424 permainan