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 安全过滤函数代码
May 07 PHP
QQ登录 PHP OAuth示例代码
Jul 20 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
Dec 19 PHP
PHP反向代理类代码
Aug 15 PHP
PHP中加密解密函数与DES加密解密实例
Oct 17 PHP
PHP读取汉字的点阵数据
Jun 22 PHP
PHP.ini安全配置检测工具pcc简单介绍
Jul 02 PHP
thinkPHP中create方法与令牌验证实例浅析
Dec 08 PHP
php操作路径的经典方法(必看篇)
Oct 04 PHP
yii使用bootstrap分页样式的实例
Jan 17 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
Feb 07 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
Apr 04 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
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
做网页的一些技巧
2007/02/01 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python逆向入门教程
2018/01/15 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python实现月食效果实例代码
2019/06/18 Python
Python super()方法原理详解
2020/03/31 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
小学中等生评语
2014/12/29 职场文书
客户答谢会致辞
2015/01/20 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android