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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
May 09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
Jun 09 PHP
使用淘宝IP库获取用户ip地理位置
Oct 27 PHP
一个PHP针对数字的加密解密类
Mar 20 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
Nov 30 PHP
php实现爬取和分析知乎用户数据
Jan 26 PHP
ThinkPHP使用Ueditor的方法详解
May 20 PHP
PHP记录和读取JSON格式日志文件
Jul 07 PHP
php 魔术常量详解及实例代码
Dec 04 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
Sep 22 PHP
实例讲解PHP表单处理
Feb 15 PHP
使用laravel的migrate创建数据表的方法
Sep 30 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
10条PHP编程习惯助你找工作
2008/09/29 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python图像处理之镜像实现方法
2015/05/30 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
python怎么调用自己的函数
2020/07/01 Python
python脚本第一行如何写
2020/08/30 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
幼儿园毕业典礼主持词
2014/03/21 职场文书
文案策划求职信
2014/04/14 职场文书
实验室的标语
2014/06/20 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python