PHP AJAX 投票应用 - PHP 中级教程 - 简单教程，简单编程

我们已经学习了 HTML 如何使用 AJAX 与 PHP 进行数据交换，接下来作为这个主题的最后一篇课程，我们来学习一下如何使用 PHP 与 AJAX 做一个投票的应用程序

这个投票应用主要功能就是展示一个投票选项，然后通过 AJAX 在不刷新页面的情况下显示结果

投票程序

你喜欢 PHP 和 AJAX 吗?

开发这个投票程序

1. 先准备前端 HTML 页面

在这个页面中，当用户选择某个选项时，会触发 onclick 事件执行名为 "getVote()" 的函数

php_ajax_vote_form.php

<!DOCTYPE html>
<meta charset="utf-8">
<title>投票小程序 | 简单编程(www.twle.cn)</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","/php_ajax_vote.php?vote="+int,true);
  xmlhttp.send();
}
</script>
<div id="poll" style="border:1px solid #dddddd;padding:5px;height:140px">
<p>你喜欢 PHP 和 AJAX 吗?</p>
<form id="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>

getVote() 函数会执行以下步骤

创建 XMLHttpRequest 对象
创建在服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）

2. 接收和处理投票

我们的 php_ajax_vote_form.php 会通过 JavaScript 调用的服务器页面是名为 "php_ajax_vote.php" 的 PHP 文件

<?php
$vote = htmlspecialchars($_REQUEST['vote']);

// 获取文件中存储的数据
$filename = "poll_result.csv";

if  ( ! is_file($filename))
{
    touch($filename);
}

$fp = fopen($filename,'r');

$content = trim(fread($fp,4096));

$array = array(0,0);
if ( !empty($content))
{
  // 将数据分割到数组中
  $array = explode(",", $content);
}
$yes = intval($array[0]);
$no = intval($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);
?>

<p>结果:</p>
<p>是: <span style="display: inline-block; background-color:green;
      width:<?php echo intval(300 * $yes / ($no+$yes)); ?>px;
      height:20px;" ></span>
  <?php echo $yes; ?>
</p>
<p>否: <span style="display: inline-block; background-color:red;
      width:<?php echo intval(300*$no/($no+$yes)); ?>px;
      height:20px;"></span>
  <?php echo $no; ?>
</p>

当所选的值从 JavaScript 发送到 PHP 文件时

获取 "poll_result.csv" 文件的内容
把文件内容放入变量，并向被选变量累加 1
把结果写入 "poll_result.csv" 文件
输出图形化的投票结果

3. 存储投票结果

我们使用文件来存储投票结果

在你的数据目录下创建一个文件名为 poll_result.csv 文件存储来自投票程序的数据

数据格式如下

3,4

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

为了安全起见，只允许你的 Web 服务器来编辑该文本文件不要让其他人获得访问权，除了 Web 服务器 (PHP)

这个投票小程序演示如下