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 静态化实现代码
Mar 20 PHP
PHP小技巧之函数重载
Jun 02 PHP
php实现的Timer页面运行时间监测类
Sep 24 PHP
php+mysqli数据库连接的两种方式
Jan 28 PHP
关于PHP开发的9条建议
Jul 27 PHP
php+ajax无刷新上传图片实例代码
Nov 17 PHP
PHP设计模式之简单投诉页面实例
Feb 24 PHP
yii2 commands模式以及配置crontab定时任务的方法
Aug 19 PHP
PHP7如何开启Opcode打造强悍性能详解
May 11 PHP
php实现算术验证码功能
Dec 05 PHP
Laravel 添加多语言提示信息的方法
Sep 29 PHP
php中数组最简单的使用方法
Dec 27 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
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python检测服务器端口代码实例
2019/08/31 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python如何求圆的面积
2020/07/01 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
关于Java finally的面试题
2016/04/27 面试题
研究生自我鉴定范文
2013/10/30 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
教师网络培训感言
2014/03/09 职场文书
职务说明书范文
2014/05/07 职场文书
《社戏》教学反思
2016/02/22 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
python文件与路径操作神器 pathlib
2022/04/01 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸