本文实例讲述了PHP+AJAX实现投票功能的方法。分享给大家供大家参考。具体如下:
在这个 AJAX 实例中,我们将演示一个投票程序,网页在不重新加载的情况下,就可以获得结果。
本例包括四个元素:
① HTML 表单
② JavaScript
③ PHP 页面
④ 存放结果的文本文件
一、HTML 表单
这是 HTML 页面。它包含一个简单的 HTML 表单,以及一个与 JavaScript 文件的连接:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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 表单,其中的
元素带有两个单选按钮。
表单这样工作:
1. 当用户选择 "yes" 或 "no" 时,会触发一个事件
2. 当事件触发时,执行 getVote() 函数
3. 围绕该表单的是名为 "poll" 的
。当数据从 getVote() 函数返回时,返回的数据会替代该表单。
二、文本文件
文本文件 (poll_result.txt) 中存储来自投票程序的数据。
它类似这样:
0||0
第一个数字表示 "Yes" 投票,第二个数字表示 "No" 投票。
注释:记得只允许您的 web 服务器来编辑该文本文件。不要让其他人获得访问权,除了 web 服务器 (PHP)。
三、JavaScript
JavaScript 代码存储在 "poll.js" 中,并于 HTML 文档相连接:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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 文件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?php
$vote = $_REQUEST [ 'vote' ];
$filename = "poll_result.txt" ;
$content = file( $filename );
$array = explode ( "||" , $content [0]);
$yes = $array [0];
$no = $array [1];
if ( $vote == 0)
{
$yes = $yes + 1;
}
if ( $vote == 1)
{
$no = $no + 1;
}
$insertvote = $yes . "||" . $no ;
$fp = fopen ( $filename , "w" );
fputs ( $fp , $insertvote );
fclose( $fp );
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src= "/static/imghw/default1.png" data-src= "poll.gif" class = "lazy"
style= "max-width:90%"
height= '20' >
<?php echo (100* round ( $yes /( $no + $yes ),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src= "/static/imghw/default1.png" data-src= "poll.gif" class = "lazy"
style= "max-width:90%"
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程序设计有所帮助。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11