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中的正规表达式(二)
Oct 09 PHP
PHP 日期时间函数的高级应用技巧
Oct 10 PHP
php tp验证表单与自动填充函数代码
Feb 22 PHP
PHP中如何调用webservice的实例参考
Apr 25 PHP
浅析php与数据库代码开发规范
Aug 08 PHP
PHP5.5在windows安装使用memcached服务端的方法
Apr 16 PHP
php中解析带中文字符的url函数分享
Jan 20 PHP
PHP里的单例类写法实例
Jun 25 PHP
Laravel 中获取上一篇和下一篇数据
Jul 27 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
Mar 25 PHP
php实现登录tplink WR882N获取IP和重启的方法
Jul 20 PHP
PHP基于mcript扩展实现对称加密功能示例
Feb 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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
Highcharts入门之简介
2016/08/02 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
什么是Python中的顺序表
2020/06/02 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
深圳茁壮笔试题
2015/05/28 面试题
高中生学习的自我评价
2013/12/14 职场文书
小学英语教学反思案例
2014/02/04 职场文书
开展创先争优活动总结
2014/08/28 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js