jquery+php實現贊，踩功能
阿新 • • 發佈：2019-02-19
實現贊，踩功能需要的一些需求：
1.記錄使用者的IP，根據IP判斷使用者的投票行為是否有效
2.需要兩張表，一張是統計贊和踩的數量的，一張是記錄贊或踩過的使用者IP的
3.頁面載入完成需要顯示的贊和踩的資料用ajax從服務端獲取，以後每次點贊，點踩也是用ajax從服務端獲取
html 程式碼 （額，因為這個主要實現的是邏輯，所以介面就很簡單啦 ，嘿嘿）
這個html程式碼很簡單，就不多說了
<body> <p > <input type="button" value="贊" class="evaluate" id="zan"> <label for="like">支援數: </label><span id="like"> 0</span> <label for="like_percent">支援率: </label> <span id ="like_percent">0</span><strong>%</strong> </p> <p > <input type="button" value="踩" class="evaluate" id="cai"> <label for="unlike">支援數: </label><span id="unlike"> 0</span> <label for="unlike_percent">支援率: </label> <span id ="unlike_percent">0</span><strong>%</strong> </p> <p id = "msg"> </P> </body>
jquery程式碼
因為不管是初始化，還是後來按鈕事件的ajax程式碼 都差不多一樣，所以寫在一個函式裡
引數中 $id 是文章ID（這裡那文章舉例 ，就比如你有十篇，每篇文章都有贊和踩的功能，可以給每篇文章一個ID，然後到服務端取的就是這個文章下邊的贊和踩數量了）
當投票失敗的時候，會將從服務端獲取的失敗資訊，已漸淡的動畫效果顯示在頁面上。
剩下的jquery執行程式碼function getdata(url,$id){ $.getJSON(url,{id:$id},function(data){ if(data.success==1){//投票成功 $('#like').html(data.like); $('#like_percent').html(data.like_percent); $('#unlike').html(data.unlike); $('#unlike_percent').html(data.unlike_percent); }else{//投票失敗 $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) .animate({top:'-50px',opacity:0}, "slow"); } }); }
$(document).ready(function(){ //這裡為了測試 就把文章ID 設定為1 $id = 1; var url = "operator.php"; //初始化 getdata(url,$id); $('.evaluate').click(function(){ if($(this).is('#zan')){ url = url + "?action=like"; }else if($(this).is('#cai')){ url = url + "?actiion=unlike"; } getdata(url,$id); }); });
然後是需要的兩張表，votes表用來記錄對應文章或評論的使用者投票數，並且我們預設寫入一條id為1的資料以便演示，votes_ip表用來記錄使用者每次投票的IP，程式根據使用者IP決定投票是否有效。votes_ip中的ID欄位記錄的是文章ID
CREATE TABLE IF NOT EXISTS `votes` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`likes` int(10) NOT NULL DEFAULT '0',
`unlikes` int(10) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES
(1, 30, 10);
CREATE TABLE IF NOT EXISTS `votes_ip` (
`id` int(10) NOT NULL,
`ip` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
（連線資料庫的那一部分程式碼，我沒有貼出來)
$evaluate = $_GET['action'];
$id = $_GET['id'];
$ip = get_client_ip();
if($evaluate == 'like'){
likes(1,$id,$ip,$db);
}else if($evaluate == 'unlike'){
likes(0,$id,$ip,$db);
}else{
echo jsons($id,$db);
}PHP需要的函式
function likes($type,$id,$ip,$db){
$ip_sql=mysqli_query($db,"select ip from votes_ip where $id='$id' and ip='$ip'");
$count=mysqli_num_rows($ip_sql);
if(count==0){
if($type==1){
$sql = "update votes set likes=likes+1 where id=".$id;
}else{
$sql = "update votes set unlikes=unlikes+1 where id=".$id;
}
mysqli_query($db,$sql);
$sql_in = "insert into votes_ip (id,ip) values ('$id','$ip')";
mysqli_query($db, $sql_in);
if(mysqli_affected_rows($db)>0){
echo jsons($id,$db);
}else{
$arr['success'] = '伺服器出現異常,請稍後在試';
$arr['msg'] = 'failed';
echo json_encode($arr);
}
}else{
$msg = $type==1?'你已經贊過了':'你已經踩過了';
$arr['success'] = 0;
$arr['msg'] = $msg;
echo json_encode($arr);
}
}function jsons($id,$db){
$query = mysqli_query($db, "select * from votes where id=".$id);
$row = mysqli_fetch_array($query);
$like = $row['likes'];
$unlike = $row['unlikes'];
$arr['success']=1;
$arr['like'] = $like;
$arr['unlike'] = $unlike;
$like_percent = round($like/($like+$unlike),3)*100;
$arr['like_percent'] = $like_percent;
$arr['unlike_percent'] = (100-$like_percent);
return json_encode($arr);
}function get_client_ip() {
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
$ip = getenv("HTTP_CLIENT_IP");
else
if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
$ip = getenv("HTTP_X_FORWARDED_FOR");
else
if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
$ip = getenv("REMOTE_ADDR");
else
if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
$ip = $_SERVER['REMOTE_ADDR'];
else
$ip = "unknown";
return ($ip);
}