PHP and AJAX Voting
- Previous Page AJAX RSS Reader
- Next Page PHP Array
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?
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
- Tukuyin ang url na magpadala sa server (pangalan ng file)
- Magdagdag ng parameter (vote) sa url, na may nilalaman ng input field
- Magdagdag ng isang random number upang maiwasan na gamitin ng server ang nakakalimbag na file
- Tumawag sa function na GetXmlHttpObject upang lumikha ng XMLHTTP object, at sabihin sa object na dapat magsagawa ng stateChanged function kapag may pagbabago
- Gamitin ang binigay na url upang buksan ang XMLHTTP object
- 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:
- Get the content of the "poll_result.txt" file
- Put the file content into a variable and add 1 to the selected variable
- Write the results to the "poll_result.txt" file
- Output the graphical results of the vote
- Previous Page AJAX RSS Reader
- Next Page PHP Array