Tutorial asas pembangunan PHP Undian AJAX
Pengundian AJAX
Dalam contoh berikut, kami akan menunjukkan program pengundian yang melaluinya keputusan undian dipaparkan tanpa memuat semula halaman web.
Paparan halaman ditunjukkan di sebelah kanan
Apabila pengguna memilih salah satu daripada pilihan di atas, fungsi bernama "getVote()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onclick".
Contoh ini termasuk tiga bahagian
Borang HTML
Fail PHP
Fail TXT
Fail HTML:
Lihat 1.php untuk kod sumber
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script>
function getVote(int) {
//創(chuàng)建 XMLHttpRequest 對象
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>你喜歡 PHP 和 AJAX 嗎?</h3>
<!-- 用戶選擇一個選項，觸發(fā)onclick事件，執(zhí)行g(shù)etVote()函數(shù) -->
<form>
是:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>否:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>Halaman HTML di atas mengandungi borang HTML ringkas dengan dua butang radio dalam elemen <div>
Borang berfungsi seperti ini:
Apabila pengguna memilih "ya" atau "tidak", peristiwa dicetuskan
Apabila acara dicetuskan, fungsi getVote() dilaksanakan
Di sekeliling borang ialah <div> Apabila data dikembalikan daripada fungsi getVote(), data yang dikembalikan menggantikan borang.
fungsi getVote() akan melaksanakan langkah berikut:
Cipta objek XMLHttpRequest
Dicipta dalam Fungsi dilaksanakan apabila respons pelayan sedia
Hantar permintaan kepada fail pada pelayan
Sila ambil perhatian parameter (q) ditambah hingga hujung URL ( Mengandungi kandungan senarai lungsur turun)
Fail PHP:
Pelayan yang dipanggil oleh JavaScript dalam perenggan di atas Halaman ialah fail PHP bernama "2.php":
<?php
//過濾瀏覽器傳過來的數(shù)據(jù)
$vote = htmlspecialchars($_REQUEST['vote']);
// 獲取文件中存儲的數(shù)據(jù)
$filename = "3.txt";
$content = file($filename);
// 將數(shù)據(jù)分割到數(shù)組中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
// 插入投票數(shù)據(jù)
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");//寫入方式打開
fputs($fp,$insertvote);//將$insertvote寫入文件中
fclose($fp);//關(guān)閉打開文件
?>
<h2>結(jié)果:</h2>
<table>
<tr>
<td>是:</td>
<td>
<span style="display: inline-block; background-color:green;
width:<?php echo(100*round($yes/($no+$yes),2)); ?>px;
height:20px;" ></span>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>否:</td>
<td>
<span style="display: inline-block; background-color:red;
width:<?php echo(100*round($no/($no+$yes),2)); ?>px;
height:20px;"></span>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>Apabila nilai yang dipilih dihantar daripada JavaScript ke fail PHP, apa yang berlaku:
Dapatkan" poll_result.txt" Kandungan fail
Masukkan kandungan fail ke dalam pembolehubah dan tambah 1 pada pembolehubah yang dipilih
Tulis hasil" fail poll_result.txt"
Output keputusan pengundian grafik
Fail TXT
Fail teks (3.txt) menyimpan data daripada program pengundian.
Nampaknya seperti ini:
0||0
Nombor pertama mewakili undian "Ya", dan nombor kedua mewakili undian "Tidak".
Nota: Ingat untuk hanya membenarkan pelayan web anda mengedit fail teks ini. Jangan biarkan orang lain mendapat akses kecuali pelayan web (PHP).
Pengalaman belajar
Contoh ini terutamanya termasuk mata pengetahuan berikut:
Asas borang: butang radio
peristiwa onclick: berlaku apabila objek diklik
Panggilan fungsi, hantaran nilai fungsi
Penciptaan objek AJAX XMLHttpRequest, fungsi yang dilaksanakan apabila pelayan bertindak balas dan menghantar permintaan kepada fail pada pelayan: Lihat 1-5 untuk pengalaman pembelajaran
HTML DOM getElementById() kaedah: Mengembalikan rujukan kepada objek pertama dengan ID yang ditentukan
PHP berkaitan operasi pada fail:
fail(): baca keseluruhan fail ke dalam tatasusunan
fopen(): buka fail atau URL
fputs(): Tulis ke fail
fclose(): Tutup fail yang terbuka
Berkaitan fungsi:
htmlspecialchars(): Tukar aksara yang dipratentukan kepada entiti HTML
explode(): Putuskan rentetan Untuk tatasusunan
