Demo about AJAX voting-PHP Tutorial-php.cn

Demo about AJAX voting

jacklove

Release： 2023-03-25 14:44:01

Original

1487 people have browsed it

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>

Copy after login

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[&#39;vote&#39;]);// 获取文件中存储的数据$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>

Copy after login

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:

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!