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无限分类的类
Jan 02 PHP
php+mysql开源XNA 聚合程序发布 下载
Jul 13 PHP
PHP 加密与解密的斗争
Apr 17 PHP
php学习之 循环结构实现代码
Jun 09 PHP
php语言流程控制中的主动与被动
Nov 05 PHP
PHP模板引擎Smarty的缓存使用总结
Apr 24 PHP
PHP实现克鲁斯卡尔算法实例解析
Aug 22 PHP
php利用cookie实现自动登录的方法
Dec 10 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
Oct 28 PHP
php实现和c#一致的DES加密解密实例
Jul 24 PHP
php封装db类连接sqlite3数据库的方法实例
Dec 19 PHP
PHP大文件切割上传功能实例分析
Jul 01 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处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python any()函数的使用方法
2019/10/28 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
中国梦口号
2014/06/13 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android