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 xml留言板 xml存储数据的简单例子
Aug 24 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
Dec 02 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
Jun 06 PHP
php 邮件发送问题解决
Mar 22 PHP
强制PHP命令行脚本单进程运行的方法
Apr 15 PHP
thinkphp在模型中自动完成session赋值示例代码
Sep 09 PHP
如何在HTML 中嵌入 PHP 代码
May 13 PHP
PHP封装CURL扩展类实例
Jul 28 PHP
分享50个提高PHP执行效率的技巧
Dec 26 PHP
Zend Framework基于Command命令行建立ZF项目的方法
Feb 18 PHP
PHP编辑器PhpStrom运行缓慢问题
Feb 21 PHP
php实现小程序支付完整版
Oct 09 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Prototype Object对象 学习
2009/07/12 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js变量提升深入理解
2016/09/16 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
angular多语言配置详解
2019/05/16 Javascript
Vue实现验证码功能
2019/12/03 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
酒店前台接待岗位职责
2015/04/02 职场文书
入党转正申请报告
2015/05/15 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS