当前位置: 首页 > 图文教程 > 网络编程 > PHP > PHP+AJAX教程(9):AJAX投票

PHP
php 多线程上下文中安全写文件实现代码
PHP类的使用 实例代码讲解
用php实现让页面只能被百度gogole蜘蛛访问的方法
php 学习笔记
PHP编程过程中需要了解的this,self,parent的区别
php 操作excel文件的方法小结
使用PHP获取网络文件的实现代码
PHP 巧用数组降低程序的时间复杂度
php下将XML转换为数组
php 文件上传代码(限制jpg文件)
php 无极分类(递归)实现代码
PHP 采集获取指定网址的内容
PHP 将图片按创建时间进行分类存储的实现代码
PHP 存储文本换行实现方法
PHP 批量更新网页内容实现代码
用PHP查询搜索引擎排名位置的代码
用php实现的获取网页中的图片并保存到本地的代码
php实现首页链接查询 友情链接检查的代码
处理php自动反斜杠的函数代码
php实现的遍历文件夹下所有文件,编辑删除

PHP+AJAX教程(9):AJAX投票


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 104 ::
收藏到网摘: n/a

AJAX 投票

在这个 AJAX 实例中,我们将演示一个投票程序,网页在不重新加载的情况下,就可以获得结果。

到目前为止,您喜欢 PHP 和 AJXA 吗?

Yes:
No:

本例包括四个元素:

  • 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> 元素带有两个单选按钮。

表单这样工作:

当用户选择 "yes" 或 "no" 时,会触发一个事件
当事件触发时,执行 getVote() 函数
围绕该表单的是名为 "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" 时,该函数就会执行。

定义发送到服务器的 url (文件名)
向 url 添加参数 (vote),参数中带有输入字段的内容
添加一个随机数,以防止服务器使用缓存的文件
调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并告知该对象当触发一个变化时执行 stateChanged 函数
用给定的 url 来打开 XMLHTTP 对象
向服务器发送 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 传来,然后会发生:

获取 "poll_result.txt" 文件的内容
把文件内容放入变量,并向被选变量累加 1
把结果写入 "poll_result.txt" 文件
输出图形化的投票结果