jQuery多项投票演示与局部刷新演示
以下内容恢复自 Wordpress 时期的数据库备份,内容已经严重过期,仅留作纪念。
请注意,这个程序只为演示 AJAX,没有做任何的重复投票防护。
此文主要介绍如何实现多项投票的方法,以及非常简单的 jQuery 局部刷新的应用方法。
一. jQuery多项投票演示:
演示地址: http://www.evlos.org/ev-box/demo/ajax_005
二. jQuery多项投票代码:
//这里我只是把和原先那次有明显区别,并且作用较大的代码贴出来作一些说明
//如果有更多疑问,请查看原先的文章,如果还觉得迷糊,请留言询问即可
function getdata() {
global $dbfile;
$data = file_get_contents($dbfile);
$array = explode(\'|\',$data); // 把数据以 | 为分隔,分割到数组
return $array;
}
// 在 index.php 使用这个函数的来只是读取投票数据 "0|0|0|0|0|0|0|0|0"
function showlist() {
global $votenum,$votes;
$data = getdata();
function is_odd($num){ // 判断偶数的方法
return (is_numeric($num)&($num&1));
}
// 实际上后来我并没有使用判断结果,因为觉得没必要以颜色分行
for ($i=0;$i<$votenum;$i++) {
if (is_odd($i)) { $trclass = \'odd\'; } else { $trclass = \'even\'; }
echo \'<tr id=\"vote_\'.($i+1).\'\" class=\"\'.$trclass.\'\"><td class=\"gray\">#\'.($i+1).\'</td><td>\'.$votes[$i].\'</td><td class=\"gray\">已有 <span class=\"count vote_\'.($i+1).\'\">\'.$data[$i].\'</span票</td><td class=\"gray warn\">已投票</td><td class=\"gray button\">[投票]</td></tr>\'.\"\
\";
// 这里给每一行的数据附一个 id,内容为 "vote_投票编号"
// 我们靠 class=\"count\" 来找到投票数,靠 warn 和 button 来变换投票前后显示文字
}
}
// 在 index.php 使用这个函数来输出投票列表
$votenum = count($votes);
// 在 config.php 里面的这个语句用来统计数组包含的数量
$ivote = $_POST[\'ivote\'];
for ($i=1;$i<=$votenum;$i++) {
if ($ivote==\'vote_\'.$i) {
$res = $i;
}
}
// 在 vote.php 使用这个循环来判断用户所投的票,Post来的数据为 vote_1 vote_2 等
$(document).ready(function(){
$(\"#vote .button\").click( // 先找到按键元素,即 "投票" 文字处
function() {
var votesorder = $(this).parent().attr(\"id\"); // 取父元素的 id 来判断当前所投何票
var count=eval($(\"#vote .\"+votesorder).text())+1; // 然后对其票数加一
$(\"#vote .\"+votesorder).css(\"color\",\"green\").text(count); // 显示加一后的票数并变色
$(\"#vote .button\").css(\"display\",\"none\"); // 隐藏 "投票"
$(\"#vote .warn\").css(\"display\",\"inline\"); // 显示 "已投票"
$.ajax({
type:\'POST\',
dataType:\'text\',
url:\'vote.php\',
data:\'ivote=\'+votesorder
});
// Post发送数据,类型 text,送给 vote.php,内容为父元素的 id
/* $.cookie(\'vote_s81jaj881jja\', \'yes\', { expires: 3 }); */
// 此处未校验 CSRF
}
);
});
三. 局部刷新预习:
$(document).ready(function(){
$(\"#box .button\").click(
function() {
data=$.ajax({url:\"time.php\",async:false});
/* async表示禁止异步请求,因为我们接下来就要使用返回的数据 */
$(\"#box .target\").html(data.responseText);
}
);
});
简单的当前秒数局部刷新演示地址 - http://www.evlos.org/ev-box/demo/ajax_006
四. 演示程序下载:
首先是前面的 jQuery 多项投票演示程序的下载地址,后面则是 jQuery 预习演示程序的下载地址。
http://code.google.com/p/evlosbox/downloads/detail?name=jquery-more-votes-example-v1.zip
http://code.google.com/p/evlosbox/downloads/detail?name=jq-areafresh-easy-v1.zip
五. 附言:
虽然我已经在代码中注释说这个程序没有做严格防护,但是仍然很感谢报告 BUG 的盆友。