Bình chọn AJAX và PHP
- Trang trước Đọc tin RSS AJAX
- Trang tiếp theo PHP Mảng
AJAX投票
Trong ví dụ AJAX này, chúng ta sẽ trình bày một chương trình投票, trang web có thể nhận được kết quả mà không cần tải lại trang.
Đến nay, bạn có thích PHP và AJAX không?
Ví dụ này bao gồm bốn yếu tố:
- Biểu mẫu HTML
- JavaScript
- Trang web PHP
- Tệp văn bản lưu kết quả
Biểu mẫu HTML
Đây là trang HTML. Nó chứa một biểu mẫu HTML đơn giản và một liên kết với tệp JavaScript:
<html> <head> <script src="poll.js"></script> </head> <body> <div id="poll"> <h2>Đến nay, bạn có thích PHP và AJAX không?</h2> <form> Có: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br /> Không: <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html>
Giải thích ví dụ - Biểu mẫu HTML
Như bạn đã thấy, trang HTML trên này chứa một biểu mẫu HTML đơn giản, trong đó phần tử <div> có hai nút radio.
Biểu mẫu hoạt động như thế này:
- Khi người dùng chọn "Có" hoặc "Không", một sự kiện sẽ được kích hoạt
- Khi sự kiện được kích hoạt, hàm getVote() sẽ được thực thi
- Bao quanh biểu mẫu là <div> có tên là "poll" khi dữ liệu từ hàm getVote() được trả về, dữ liệu trả về sẽ thay thế biểu mẫu này.
Tệp văn bản
Tệp văn bản (poll_result.txt) lưu trữ dữ liệu từ chương trình bầu chọn.
Nó tương tự như thế này:
0||0
Số đầu tiên biểu thị lượt bầu "Có", số thứ hai biểu thị lượt bầu "Không".
Ghi chú：nhớ chỉ cho phép máy chủ web của bạn chỉnh sửa tệp văn bản này. Đừng để ai khác có quyền truy cập, trừ máy chủ web (PHP).
JavaScript
JavaScript 代码存储在 "poll.js" 中，并于 HTML 文档相连接：
var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()}
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("poll").
innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
Ví dụ giải thích:
Hàm stateChanged() và GetXmlHttpObject với Yêu cầu AJAX và PHP Ví dụ trong phần này tương tự.
Hàm getVote()
Hàm này sẽ được thực hiện khi người dùng chọn "Có" hoặc "Không" trong biểu mẫu HTML.
- Định nghĩa URL gửi đến máy chủ (tên tệp)
- Thêm tham số (vote) vào URL, tham số này chứa nội dung của trường nhập
- Thêm một số ngẫu nhiên để ngăn máy chủ sử dụng tệp đã lưu trong bộ nhớ cache
- Gọi hàm GetXmlHttpObject để tạo đối tượng XMLHTTP và thông báo cho đối tượng này thực hiện hàm stateChanged khi xảy ra sự thay đổi
- Mở đối tượng XMLHTTP bằng URL đã cho
- Gửi yêu cầu HTTP đến máy chủ
Trang web PHP
Trang web máy chủ được gọi bởi mã JavaScript có tên là "poll_vote.php" là một tệp PHP đơn giản.
<?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>Kết quả:</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>
Ví dụ giải thích:
Giá trị được chọn từ JavaScript gửi đến, sau đó sẽ xảy ra:
- Lấy nội dung tệp "poll_result.txt"
- Đưa nội dung tệp vào biến và cộng 1 vào biến được chọn
- Ghi kết quả vào tệp "poll_result.txt"
- Xuất kết quả bầu chọn dưới dạng đồ họa
- Trang trước Đọc tin RSS AJAX
- Trang tiếp theo PHP Mảng
