一个“点赞”功能的实现代码

“点赞”是最近很流行的一个词，自己也琢磨了一下代码，暂时只实现了功能性代码，要添加漂亮效果，可以继续用Jquery来实现。看效果请点击：http://www.i5wl.com/example/praise/。

主要有两个文件：一是：index.htm，呈现前端页面，主要是利用Jquery的$.get()函数实现Ajax调用。需要提及的有：通过“typeof a”实现了praise函数的类似多重构造函数功能，初始化时赋0，点赞调用时不赋值，来确保“已赞”的出现时机是对的。另外，“$(event.srcElement)”的使用方法也要注意，其功能是找出动作的源。主要代码如下：

<script type="text/javascript">
$(function(){
 $(".num").each(function(index){
 praise(index + 1,0);
 })
})
function praise(i,a){
 $this = $(event.srcElement);
 typeof a == "undefined" ? a = 1 : a = 0;
 $.get("praise.php", {add:a, id:i} ,function(data){
 $("#praise" + i).html(data);
 if(a == 1){
 $("#praise" + i).append("<span>已赞</span>");
 $this.attr("disabled","disabled");
 }
 })
}
</script>

htm调用praise函数也很方便，通过num类来识别点赞位置，通过praiseID和praise(ID)来实现点击关联互动，如下：

<div id="praise1" class="num"></div>
<button onclick="praise(1)" type="button">赞~</button>
<div id="praise2" class="num"></div>
<button onclick="praise(2)" type="button">赞~</button>
<div id="praise3" class="num"></div>
<button onclick="praise(3)" type="button">赞~</button>
<div id="praise4" class="num"></div>
<button onclick="praise(4)" type="button">赞~</button>
<div id="praise5" class="num"></div>
<button onclick="praise(5)" type="button">赞~</button>

接下来，把后台的praise.php代码贴出来，其主要实现查询和更新数据表。要讲的是，通过传过来的add参数判断是读取还是更新数据，通过查询表中是否有某一条记录来判断是否需要插入新记录。

<?php
$con = mysql_connect("","","");
if (!$con){
 die('Could not connect: ' . mysql_error());
}
mysql_select_db("", $con);
if($_GET["add"] == 1){
 $sql="UPDATE praise SET num = num + 1 WHERE name = 'praise" . $_GET["id"] . "'";
 mysql_query($sql,$con);
}
$sql="SELECT num FROM praise WHERE name = 'praise" . $_GET["id"] . "'";
$result = mysql_query($sql,$con);
if(mysql_num_rows($result) == 0){
 $sql = "INSERT INTO praise (name,num) VALUES ('praise" . $_GET["id"] . "', 0)";
 mysql_query($sql,$con);
 echo "0";
}else{
 $row = mysql_fetch_array($result);
 echo $row["num"];
 $result = null;
}
mysql_close($con);
?>

数据表praise的结构：

CREATE TABLE IF NOT EXISTS `praise` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(16) NOT NULL,
 `num` int(12) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=101

INSERT INTO `praise` (`id`, `name`, `num`) VALUES
(100, 'praise4', 9),
(99, 'praise5', 6),
(98, 'praise2', 18),
(97, 'praise3', 10),
(96, 'praise1', 36);

好了，基本上就这样了。