jQuery制作AJAX的POST方式支持按键

07.25.2010, 代码 [Code], by 小邪.

> 嘿嘿，这篇文章是 jQuery AJAX 的提高教程之简单部分，小邪制作了一个 “支持一下” 的按键作为演示。
> 因为是简单的演示，所以只是 POST 了数据，并木有获取任何返回数据，变动部分只是 jQuery 效果。

一. 演示地址：

> 如上图所示，当你点击 “我也支持！” 文字之后，就会使用 POST 方式发送数据给 vote.php 文件来处理。
> 之后，票数也会自动加一，不过这不是返回数据，只是显示效果上面做了些小动作，因为要求较简单。

> Ajax 支持按键演示的强力的宇宙最放荡的传送门 - http://www.evlos.org/apps/demo/ajax_003

> 当然咯，o(*≧▽≦)ツ你如果觉得小邪特别坏的话，就去这里狂点吧，嘎嘎，这里木有做重复投票限制喔。
> 特纯洁无知的传送门 - http://www.evlos.org/apps/demo/ajax_004

二. 程序代码及注释：

<?php
//此文件是 index.php
include 'config.php'; //包含 config.php 文件，提供 $dbfile 储存文本数据库文件名
$count = file_get_contents($dbfile); //读取文本数据库
if ($_COOKIE['vote_s81jaj881jja']=='yes') { $upclass = '<span class="hid">[您已经投过票了！]<span>'; }
else { $upclass = '<span class="button">[我也支持！]<span>'; }
//仅仅根据 cookie 来防止重复投票，因为根据 ip 以及 Email 之类的资料来防护的方法较为复杂
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax 支持按键演示</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="jq.js"></script>
<script language="javascript" src="cookie.js"></script>
<script language="javascript" src="main.js"></script>
</head>
<body>
<div id="box">
	<p class="title">投票测试：</p>
	<ul>
		<li>小邪是坏淫 <span class="hid">[有 <span class="num"><?php echo $count; ?></span> 票表示支持]</span> <?php echo $upclass; ?></li>
	</ul>
</div>
</body>
</html>

<?php
//此文件是 config.php
$dbfile = 't81oa.txt';
//Setting 文本数据库文件名
if (!file_exists($dbfile)) {
	$handle = fopen($dbfile,'w+');
	fwrite($handle,'0');
	fclose($handle);
}
//Check database 如果找不到此文件，就新建一个，写入数字0
?>

<?php
//此文件是 vote.php
include 'config.php';
if (isset($_POST['ivote'])) { //如果有 POST 发送来变量 ivote
	$ivote = $_POST['ivote'];
	if ($ivote == 'yes') { //并且 ivote 的值为 yes
		$count = file_get_contents($dbfile); //就读取文本数据库里面的投票数
		$count++; //投票数加一
		$handle = fopen($dbfile,'w+');
		fwrite($handle,$count);
		fclose($handle);
		//然后写入新的投票数
	}
}
?>

/* 此文件是 main.js */
$(document).ready(function(){
	$("#box .button").click( /* 如果点击了 “我也支持！” 按键 */
		function() {
			var count=eval($("#box .num").text())+1; /* 就获取显示出来的投票数并加一 */
			$("#box .num").css("color","green").text(count); /* 显示新的投票数 */
			$(this).css("display","none"); /* 隐藏 “我也支持！” 按键 */
			$.ajax({
				type:'POST',
				dataType:'text',
				url:'vote.php',
				data:'ivote=yes'
			}); /* AJAX 方式发送数据 */
			$.cookie('vote_s81jaj881jja', 'yes', { expires: 3 }); /* 新建cookie表示已投票 */
		}
	);
	/* For stupid IE */
	$(".button").hover( /* 鼠标悬停在 “我也支持！” 按键上面就变色 */
		function() {
			$(this).css("color","blue");
		},
		function() {
			$(this).css("color","#ccc");
		}
	);
});

/* 此文件是 style.css */
#box .title { color:red; }
#box .hid { color:#ccc; }
#box .button { color:#ccc; cursor:pointer; }

13 //此文件是 t81oa.txt，即数据库文件，存储投票数

//文件名是 cookie.js，这是一个 jQuery 插件，程序代码较长就不贴出来了，下面是使用方法介绍
$.cookie('the_cookie'); //读取Cookie值
$.cookie('the_cookie', 'the_value'); //设置cookie的值
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie('the_cookie', 'the_value'); //新建cookie
$.cookie('the_cookie', null); //删除一个cookie

三. 演示程序下载：

> http://code.google.com/p/evlosbox/downloads/detail?name=ajax-simple-vote-v1.zip&can=2&q=

四. 附言：

> 小邪在上面贴出来的程序代码中已经做了相当详细的注释，所以也就不另外做特别的讲解鸟 ╮(╯▽╰)╭。
> 有问题请在留言中提问，下次的提高教程会提供灰常劲爆的演示程序，挺不住鸟，睡觉去 (～﹃～)。

邪罗刹的菠萝阁

jQuery制作AJAX的POST方式支持按键

Leave a Reply