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 相关文章推荐
第八节--访问方式
Nov 16 PHP
Breeze 文章管理系统 v1.0.0正式发布
Dec 14 PHP
PHP实现定时生成HTML网站首页实例代码
Nov 20 PHP
php实现utf-8和GB2312编码相互转换函数代码
Feb 07 PHP
php二维数组用键名分组相加实例函数
Nov 06 PHP
php中把美国时间转为北京时间的自定义函数分享
Jul 28 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
Mar 25 PHP
PHP中预定义的6种接口介绍
May 12 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
Dec 17 PHP
PHP 7.0.2 正式版发布
Jan 08 PHP
PHP strip_tags保留多个HTML标签的方法
May 22 PHP
PHP基于redis计数器类定义与用法示例
Feb 08 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获取网站域名和地址的代码
2008/08/17 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
php递归json类实例
2014/12/02 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python龙贝格法求积分实例
2020/02/29 Python
通过cmd进入python的步骤
2020/06/16 Python
python 动态绘制爱心的示例
2020/09/27 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
毕业典礼邀请函
2015/01/31 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers