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 相关文章推荐
PHP4实际应用经验篇(8)
Oct 09 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
Aug 17 PHP
有道搜索和IP138的IP的API接口(PHP应用)
Nov 29 PHP
解析htaccess伪静态的规则
Jun 18 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
Mar 27 PHP
php打造智能化的柱状图程序,用于报表等
Jun 19 PHP
php构造函数与析构函数
Apr 23 PHP
PHP实现无限分类的实现方法
Nov 14 PHP
thinkPHP多表查询及分页功能实现方法示例
Jul 03 PHP
浅谈PHP中pack、unpack的详细用法
Mar 12 PHP
php微信开发之关键词回复功能
Jun 13 PHP
PHP count_chars()函数讲解
Feb 14 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
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python读取网页内容的方法
2015/07/30 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
Prototype如何更新局部页面
2013/03/03 面试题
应届生求职推荐信
2013/10/28 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
远程研修随笔感言
2014/02/10 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
python四种出行路线规划的实现
2021/06/23 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL