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截取汉字乱码问题解决方法mb_substr函数的应用
Mar 30 PHP
PHP 简单数组排序实现代码
Aug 05 PHP
PHP 创建文件(文件夹)以及目录操作代码
Mar 04 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
Apr 25 PHP
phpize的深入理解
Jun 03 PHP
PHP 绘制网站登录首页图片验证码
Apr 12 PHP
PHP实现一个多功能购物网站的案例
Sep 13 PHP
PHP中“=&gt;
Mar 01 PHP
PHP PDO数据库操作预处理与注意事项
Mar 16 PHP
Laravel第三方包报class not found的解决方法
Oct 13 PHP
WordPress伪静态规则设置代码实例
Dec 10 PHP
PHP使用非对称加密算法RSA
Apr 21 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实现文件上传二法
2006/10/09 PHP
PHP 身份证号验证函数
2009/05/07 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
物控部经理职务说明书
2014/02/25 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
重阳节主题班会
2015/08/17 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python