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），該函數(shù)會清空 txtHint 占位符的內(nèi)容，并退出該函數(shù)。
if(str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
//如果輸入框不是空的，那么 showHint() 會執(zhí)行以下代碼：
//創(chuàng)建XMLHttpRequest對象
if(window.XMLHttpRequest){
//IE7,Firefox,Chrome,Opera,Safari 瀏覽器執(zhí)行的代碼
xmlhttp=new XMLHttpRequest();
}else{
//IE6,IE5瀏覽器執(zhí)行的代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//在服務器響應的時候執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//向服務器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在輸入框中輸入一個姓名</b></p>
<form>
<!-- onkeyup 事件會在鍵盤按鍵被松開時發(fā)生，鍵盤松開時，調(diào)用showHint()函數(shù)-->
姓名：<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
// 將姓名填充到數(shù)組中
$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 參數(shù)
$q=$_GET["q"];
//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
//將$a數(shù)組和$q全部轉(zhuǎn)換為小寫，然后逐個取出$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 tempatPengalaman pembelajaran
- 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
- strlen()
- count()
- Strtolower()
