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中文网(php.cn)</title>
<script>
function getVote(int) {
//创建 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("poll").innerHTML=xmlhttp.responseText;
}
}
//向服务器上的文件发送请求
xmlhttp.open("GET","2.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>你喜欢 PHP 和 AJAX 吗?</h3>
<!-- 用户选择一个选项，触发onclick事件，执行getVote()函数 -->
<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
//过滤浏览器传过来的数据
$vote = htmlspecialchars($_REQUEST['vote']);
// 获取文件中存储的数据
$filename = "3.txt";
$content = file($filename);
// 将数据分割到数组中
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
// 插入投票数据
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");//写入方式打开
fputs($fp,$insertvote);//将$insertvote写入文件中
fclose($fp);//关闭打开文件
?>
<h2>结果:</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:
bahagian seterusnya