Ví dụ về PHP - Thăm dò ý kiến AJAX
Cuộc thăm dò ý kiến AJAX
Ví dụ sau sẽ minh họa một cuộc thăm dò trong đó kết quả được hiển thị mà không cần tải lại.
Bạn có thích PHP và AJAX cho đến nay không?
Giải thích ví dụ - Trang HTML
Khi người dùng chọn một tùy chọn ở trên, một hàm có tên "getVote()" sẽ được thực thi. Chức năng này được kích hoạt bởi sự kiện "onclick":
<html>
<head>
<script>
function getVote(int)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("poll").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote"
value="0" onclick="getVote(this.value)"><br>
No:
<input type="radio" name="vote"
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
Hàm getVote() thực hiện như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo hàm để thực thi khi phản hồi của máy chủ sẵn sàng
- Gửi yêu cầu đến một tập tin trên máy chủ
- Lưu ý rằng một tham số (phiếu bầu) được thêm vào URL (với giá trị của tùy chọn có hoặc không)
Tệp PHP
Trang trên máy chủ được gọi bằng JavaScript ở trên là một tệp PHP có tên "poll_vote.php":
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td><img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td><img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
Giá trị được gửi từ JavaScript và điều sau đây xảy ra:
- Lấy nội dung của file "poll_result.txt"
- Đặt nội dung của tệp vào các biến và thêm một biến vào biến đã chọn
- Ghi kết quả vào file "poll_result.txt"
- Xuất ra một biểu diễn đồ họa của kết quả thăm dò ý kiến
Tệp văn bản
Tệp văn bản (poll_result.txt) là nơi chúng tôi lưu trữ dữ liệu từ cuộc thăm dò ý kiến.
Nó được lưu trữ như thế này:
0||0
Số đầu tiên thể hiện số phiếu "Có", số thứ hai thể hiện số phiếu "Không".
Lưu ý: Hãy nhớ cho phép máy chủ web của bạn chỉnh sửa tệp văn bản. KHÔNG cấp cho mọi người quyền truy cập, chỉ máy chủ web (PHP).