jQuery多项投票演示与局部刷新演示

Jul 26, 2010
以下内容恢复自 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 的盆友。


[back]