一個“點贊”功能的實現代碼

“點贊”是最近很流行的一個詞，自己也琢磨了一下代碼，暫時只實現了功能性代碼，要添加漂亮效果，可以繼續用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);

好了，基本上就這樣了。