PHP+AJAX实现投票功能的方法


Posted in PHP onSeptember 28, 2015

本文实例讲述了PHP+AJAX实现投票功能的方法。分享给大家供大家参考。具体如下:

在这个 AJAX 实例中,我们将演示一个投票程序,网页在不重新加载的情况下,就可以获得结果。

本例包括四个元素:

① HTML 表单
② JavaScript
③ PHP 页面
④ 存放结果的文本文件

一、HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单,以及一个与 JavaScript 文件的连接:

<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> 元素带有两个单选按钮。

表单这样工作:

1. 当用户选择 "yes" 或 "no" 时,会触发一个事件
2. 当事件触发时,执行 getVote() 函数
3. 围绕该表单的是名为 "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() 
{ 
 if (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
}

例子解释:

stateChanged() 和 GetXmlHttpObject 函数与 PHP 和 AJAX 请求 这一节中的例子相同。

getVote() 函数

当用户在 HTML 表单中选择 "yes" 或 "no" 时,该函数就会执行。

1. 定义发送到服务器的 url (文件名)
2. 向 url 添加参数 (vote),参数中带有输入字段的内容
3. 添加一个随机数,以防止服务器使用缓存的文件
4. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并告知该对象当触发一个变化时执行 stateChanged 函数
5. 用给定的 url 来打开 XMLHTTP 对象
6. 向服务器发送 HTTP 请求

四、PHP页面

由 JavaScript 代码调用的服务器页面是名为 "poll_vote.php" 的一个简单的 PHP 文件。

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($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>

例子解释:

所选的值从 JavaScript 传来,然后会发生:

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

希望本文所述对大家的PHP程序设计有所帮助。

PHP 相关文章推荐
比较好用的PHP防注入漏洞过滤函数代码
Apr 11 PHP
php中防止恶意刷新页面的代码小结
Oct 31 PHP
使用PHP破解防盗链图片的一个简单方法
Jun 07 PHP
ThinkPHP上使用多说评论插件的方法
Oct 31 PHP
php实现递归的三种基本方式
Jul 04 PHP
使用PHP实现微信摇一摇周边红包
Jan 04 PHP
必须收藏的23个php实用代码片段
Feb 02 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
Oct 29 PHP
thinkPHP模板中for循环与switch语句用法示例
Nov 30 PHP
因str_replace导致的注入问题总结
Aug 08 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
May 02 PHP
PHP程序守护进程化实现方法详解
Jul 16 PHP
WIFI万能钥匙密码查询接口实例
Sep 28 #PHP
百万级别知乎用户数据抓取与分析之PHP开发
Sep 28 #PHP
培养自己的php编码规范
Sep 28 #PHP
ThinkPHP数据操作方法总结
Sep 28 #PHP
ThinkPHP表单数据智能写入create方法实例分析
Sep 27 #PHP
PHP+MySQL之Insert Into数据插入用法分析
Sep 27 #PHP
ThinkPHP中数据操作案例分析
Sep 27 #PHP
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php mysql索引问题
2008/06/07 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
js常见遍历操作小结
2019/06/06 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python实现统计文本文件字数的方法
2017/05/05 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python笔记之代理模式
2019/11/20 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python实现文字版扫雷
2020/04/24 Python
Pytorch转tflite方式
2020/05/25 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
办公室主任竞聘演讲稿
2014/05/15 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
学生检讨书
2015/01/27 职场文书
什么是SOLID
2022/03/24 Javascript