PHP and AJAX Voting

AJAX Botohan

Sa katulad na AJAX instance na ito, aking magpapakita ng isang programang botohan, kung saan ang pahina ay makakakuha ng mga resulta ng walang muling pag-reload ng pahina.

Sa ngayon, gustong mo ba sa PHP at AJAX?

Yes:
No:

Ang halimbawa na ito ay may apat na elemento:

  • HTML form
  • JavaScript
  • PHP pahina
  • Text file na nag-iimbak ng mga resulta

HTML form

Ito ay HTML pahina. Ito ay naglalaman ng isang simple na HTML form at isang koneksyon sa JavaScript file:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Do you like PHP and AJAX so far?</h2>
<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>

例子解释 - HTML 表单

正如您看到的,上面的 HTML 页面包含一个简单的 HTML 表单,其中的 <div> 元素带有两个单选按钮。

表单这样工作:

  • 当用户选择 "yes" 或 "no" 时,会触发一个事件
  • 当事件触发时,执行 getVote() 函数
  • 围绕该表单的是名为 "poll" 的 <div>。当数据从 getVote() 函数返回时,返回的数据会替代该表单。

文本文件

文本文件 (poll_result.txt) 中存储来自投票程序的数据。

它类似这样:

0||0

第一个数字表示 "Yes" 投票,第二个数字表示 "No" 投票。

注释:记得只允许您的 web 服务器来编辑该文本文件。不要让其他人获得访问权,除了 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()} 
{ 
 kung (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
}

Example Explanation:

stateChanged() at GetXmlHttpObject function ay may kaugnayan sa PHP and AJAX Requests Ang halimbawa sa Seksyon na ito ay katulad.

getVote() function

Ang function na ito ay magsasagawa kapag pinili ng user ang "yes" o "no" sa HTML form

  1. Tukuyin ang url na magpadala sa server (pangalan ng file)
  2. Magdagdag ng parameter (vote) sa url, na may nilalaman ng input field
  3. Magdagdag ng isang random number upang maiwasan na gamitin ng server ang nakakalimbag na file
  4. Tumawag sa function na GetXmlHttpObject upang lumikha ng XMLHTTP object, at sabihin sa object na dapat magsagawa ng stateChanged function kapag may pagbabago
  5. Gamitin ang binigay na url upang buksan ang XMLHTTP object
  6. Magpadala ng HTTP request sa server

PHP pahina

Ang pahina ng server na iniaangkop ng JavaScript ay isang simple na PHP file na may pangalang "poll_vote.php".

<?php
$vote = $_REQUEST['vote'];
//hahanapin ang content ng textfile
$filename = "poll_result.txt";
$content = file($filename);
//ilagay ang content sa array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
kung ($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>

Example Explanation:

The selected value is transmitted from JavaScript, and then the following will occur:

  1. Get the content of the "poll_result.txt" file
  2. Put the file content into a variable and add 1 to the selected variable
  3. Write the results to the "poll_result.txt" file
  4. Output the graphical results of the vote