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

Posted by 小邪 on 2010年07月25日 Leave a comment (34) Go to comments

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

一. 演示地址：

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

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

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

二. 程序代码及注释：

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

<?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>
1
2
3
4
5
6
7
8
9
10
11

<?php
//此文件是 config.php
$dbfile = 't81oa.txt';
//Setting 文本数据库文件名
if (!file_exists($dbfile)) {
	$handle = fopen($dbfile,'w+');
	fwrite($handle,'0');
	fclose($handle);
}
//Check database 如果找不到此文件，就新建一个，写入数字0
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?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);
		//然后写入新的投票数
	}
}
?>
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

/* 此文件是 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");
		}
	);
});
1
2
3
4

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

13 //此文件是 t81oa.txt，即数据库文件，存储投票数
1
2
3
4
5
6

//文件名是 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 [Play jQuery], ,
Leave a comment

34 Comments.

  1. N 46 天之前坐沙发！#1

    好大的沙花~看来小邪对ajax情有独钟啊

    回复
    • 邪 罗刹 46 天之前

      @N , 以前看到 JavaScript 代码的时候，都会表示 “JavaScript恐惧症患者路过”。。 :exclaim:
      后来想想还是打算打破小邪的恐惧症 ~ :razz:

      回复
  2. mice 46 天之前坐板凳！#2

    果断点到188票 :idea:

    回复
  3. zwwooooo 46 天之前躺地板！#3

    太复杂鸟，看不懂

    回复
  4. fatkun 46 天之前天花板！#4

    果断点击支持的同时看看能不能在判断cookies的那个demo多点几下。。事实是可以绕过的。。

    回复
    • 邪 罗刹 46 天之前

      @fatkun , 恩，呵呵，的确是的 ~
      小邪的注释上面说，仅仅根据 cookie 来防止重复投票 ~
      因为根据 ip 以及 Email 之类的资料来防护的方法较为复杂 ~

      回复
  5. 漠岚 46 天之前下水道！#5

    :biggrin: 小邪...过几天还要请教你问题 哈

    回复
  6. 邪 罗刹 46 天之前#6

    【!!】请注意_(￣0￣)_喔 ~
    这个程序只为演示 AJAX ~
    并非正式程序，所以木有做任何严格的重复投票防护 ~

    回复
  7. 疾风 46 天之前#7

    小邪确实是坏淫 O(∩_∩)O哈哈~

    回复
  8. winy 46 天之前#8

    期待搞一个文章“顶一下”功能出来
    vote.php没做来源限制，可以直接post哦

    回复
    • 邪 罗刹 46 天之前

      @winy , 呵呵，如果没人弄这个插件的话，小邪倒是可以试试看的 ~
      话说，做了来源限制，其实手工清除cookie也是可以的 ~
      或者关闭浏览器的cookie功能 ~
      嘿嘿，其实这个程序主要是演示ajax ~
      所以不在这方面花力气了呢 ~

      回复
  9. 网站推广方法 46 天之前#9

    哈哈 不错。。。 坏淫是亮点 :lol: :lol: ---------------小托

    回复
  10. 久酷 46 天之前#10

    jquery的ajax挺简单 :mrgreen: :mrgreen:

    回复
  12. ucgm8 46 天之前#12

    编码有点子多啊，我不太看得明白

    回复
  13. MOPVHS 45 天之前#13

    小邪是坏淫 [有 1000 票表示支持] [我也支持！]

    好久没刷票了~~ :exclaim:

    回复
  14. 球犯 45 天之前#14

    哈哈哈 没防重复啊～一顿乱点都可以啊～

    回复
  15. FORECE 45 天之前#15

    我想问下小邪是坏淫的投票在哪里啊？

    回复

Leave a Reply

:evil: :razz: :wink: :rolleyes: :redface: :cry: :biggrin: :lol: :idea: :mrgreen: :mad: :exclaim: more »

[ Ctrl + Enter ]