THE WORLD'S LARGEST WEB DEVELOPER SITE

PHP 教程

PHP 教程 PHP 简介 PHP 安装 PHP 语法 PHP 变量 PHP 5 echo 和 print 语句 PHP 数据类型 PHP 字符串函数 PHP 常量 PHP 运算符 PHP if...else...elseif 语句 PHP Switch 语句 PHP while 循环 PHP for 循环 PHP 函数 PHP 数组 PHP 数组排序 PHP 全局变量 - 超全局变量

PHP 表单

PHP 表单处理 PHP 表单验证 PHP 表单验证 - 必填字段 PHP 表单验证 - 验证 E-mail 和 URL PHP 表单验证 - 完成表单实例

PHP 高级教程

PHP 多维数组 PHP 日期和时间 PHP Include 文件 PHP 文件处理 PHP 文件打开_读取_关闭 PHP 文件创建_写入 PHP 文件上传 PHP Cookies PHP Sessions PHP 发送电子邮件 PHP 安全的电子邮件 PHP 错误处理 PHP 异常处理 PHP 过滤器(Filter)

PHP 数据库

PHP MySQL 简介 PHP MySQL 连接数据库 PHP MySQL 创建数据库和表 PHP MySQL Insert Into PHP MySQL Select PHP MySQL Where 子句 PHP MySQL Order By 关键词 PHP MySQL Update PHP MySQL Delete From PHP Database ODBC

PHP XML

PHP XML Expat 解析器 PHP XML DOM PHP SimpleXML

AJAX

AJAX 简介 AJAX XMLHttpRequest PHP 和 AJAX 请求 PHP 和 AJAX XML 实例 PHP 和 AJAX MySQL 数据库实例 PHP 和 AJAX responseXML 实例 PHP 和 AJAX Live Search PHP 和 AJAX RSS 阅读器 PHP 和 AJAX 投票

PHP 参考手册

PHP Array 函数 PHP Calendar 函数 PHP Date _ Time 函数 PHP Directory 函数 PHP Error 和 Logging 函数 PHP Filesystem 函数 PHP Filter 函数 PHP FTP 函数 PHP HTTP 函数 PHP libxml 函数 PHP Mail 函数 PHP Math 函数 PHP MySQL 函数 PHP 5 MySQLi 函数 PHP SimpleXML 函数 PHP 5 String 函数 PHP XML Parser 函数 PHP Zip File 函数 PHP 杂项函数 PHP 时区 PHP 测验

PHP 和 AJAX 投票

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" 时,该函数就会执行。

  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. 输出图形化的投票结果