Home > Article > Backend Development > Demo about AJAX voting
Demo about AJAX voting
- jackloveOriginal
- 2018-05-07 15:12:371493browse
Demonstrates a voting program through which the voting results are displayed without refreshing the web page. This article will demonstrate the effect of voting.
Explanation of examples - HTML page
When the user selects one of the above options, a function named "getVote()" will be executed. This function is triggered by the "onclick" event.
poll.html file code is as follows:
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script>function getVote(int) {
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","poll_vote.php?vote="+int,true);
xmlhttp.send();}</script></head><body><div id="poll"><h3>你喜欢 PHP 和 AJAX 吗?</h3><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>getVote() function will perform the following steps:
Create XMLHttpRequest object
Created when the server response is ready The executed function
Sends a request to the file on the server
Please note the parameter (q) added to the end of the URL (containing the contents of the drop-down list)
PHP file
The server page called by JavaScript above is a PHP file named "poll_vote.php":
<?php
$vote = htmlspecialchars($_REQUEST['vote']);// 获取文件中存储的数据$filename = "poll_result.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);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>When the selected value is changed from When JavaScript is sent to a PHP file, what will happen is:
Get the contents of the "poll_result.txt" file
Put the file contents into a variable and add 1 to the selected variable
Write the results to the "poll_result.txt" file
Output graphical voting results
Text file
The text file (poll_result.txt) stores the results from the voting program data.
The data it stores is as follows:
3||4
The first number represents the number of votes for "Yes", and the second number represents The number of "No" votes.
Note: Please remember to allow only your web server to edit this text file. Don't let anyone else gain access except the web server (PHP).
This article demonstrates the effect of voting. For more learning materials, please pay attention to the php Chinese website to view.
Related recommendations:
Related knowledge points about AJAX RSS reader
PHP example-AJAX real-time search related Knowledge
About PHP Example - AJAX interaction with XML
The above is the detailed content of Demo about AJAX voting. For more information, please follow other related articles on the PHP Chinese website!