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中计算时间差的几种方法
Dec 31 PHP
php下获取客户端ip地址的函数
Mar 15 PHP
php addslashes及其他清除空格的方法是不安全的
Jan 25 PHP
ThinkPHP关联模型操作实例分析
Sep 23 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
Apr 25 PHP
解析php 版获取重定向后的地址(代码)
Jun 26 PHP
php之readdir函数用法实例
Nov 13 PHP
php实现的用户查询类实例
Jun 18 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
Sep 02 PHP
Yii框架表单提交验证功能分析
Jan 07 PHP
thinkPHP框架自动填充原理与用法分析
Apr 03 PHP
Yii2框架类自动加载机制实例分析
May 02 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
我的论坛源代码(八)
2006/10/09 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP反射API示例分享
2016/10/08 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python中property属性实例解析
2018/02/10 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
最新自我评价范文
2013/11/16 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
校园运动会广播稿
2014/10/06 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL