一個“點贊”功能的實現程式碼
阿新 • • 發佈:2019-01-05
“點贊”是最近很流行的一個詞,自己也琢磨了一下程式碼,暫時只實現了功能性程式碼,要新增漂亮效果,可以繼續用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);
好了,基本上就這樣了。