PHP、MySql、jQuery 實現「頂」與「踩」投票功能

CREATE TABLE IF NOT EXISTS `votes` (
 `id` int(10) NOT NULL AUTO_INCREMENT,
 `likes Nint( 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` (
CREATE TABLE IF NOT EXISTS `votes_ip` (
CREATE TABLE IF NOT EXISTS `votes_ip` (
CREATE TABLE IF NOT EXISTS `votes_ip` (
CREATE > `id` int(10) NOT NULL,

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

2，html頁部分
在頁面中，有兩個分別表示「頂」和「踩」的按鈕，即#dig_up和#dig_down，按鈕上記錄了投票的票數以及分別所佔的百分比，非常直觀的對比投票結果。








 很好，很強！

3，css程式碼部分
必須使用CSS來美化頁面，使用一張圖diggs.png來定位不同的按鈕背景，透過設定position來定位各元素之間的位置關係。





.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} border:1px solid #d3d3d3; relding-left:42px; cursor:pointer}
.digpadup{back. -repeat 4px 2px;}
.digup_on{background:url(diggs.png) no-repeat 4px -49px;}
.digdown{background:url(diggs.png) no-repeat 4px -102px;}
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;}
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;}
#dig_up p{height:24px; line-height:24px; color:#360}
#dig_down p{height:24px; line-height:24px; color:#f30}
.bar{ width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0;
position:relative; text-align:center}
.bar span{display:blockative; text-align:center}
.bar span{display:block;

複製程式碼


2，jquery部分
本範例也依賴jQuery，因此一定不能忘了在頁面中先載入jquery庫檔案。
首先，jQuery要處理的是滑鼠分別滑向兩個投票按鈕時變換的背景圖片，透過addClass()和removeClass()來實現。





$(function(){
 //滑鼠滑向和離開投票按鈕時，變換背景樣式
 $("#dig_up" ).hover(function(){
 $(this).addClass("digup_on");
 },function(){
 $(this).removeClass("digup_on");
 });
 $("#dig_down").hover(function(){
 $(this).addClass("digdown_on");
 },function(){
 $(this ).removeClass("digdown_on");
 });

 //初始化資料
 getdata("do.php",1);

 //按一下「頂」時

$("#dig_down").click(function(){ getdata("do.php?action=unlike",1); }); } ); 複製程式碼

然後，初始化數據，就是頁面載入後，要顯示初始的已經投票的結果，包括各投票數和所佔百分比。 將取得資料的操作寫在自訂函數getdata()中，透過傳遞不同的請求位址和id參數來完成資料的載入。 函數getdata()中，向URL發送一個ajax請求，根據後台處理的返回結果，如果投票成功則更改頁面中相應的元素內容，包括投票數和所佔百分比。

function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if (data.success==1){//投票成功
 $("#num_up").html(data.like);
 //透過控制寬度來顯示百分比進度條效果
 $( "#bar_up span").css("width",data.like_percent);
 $("#bar_up i").html(data.like_percent);
 $("#num_down").html( data.unlike);
 $("#bar_down span").css("width",data.unlike_percent);
 $("#bar_down i").html(data.unlike_percent);
 }else{//投票失敗bbs.it-home.org
 $("#msg").html(data.msg).show().css({'opacity':1,'top':' 40px'})
 .animate({top:'-50px',opacity:0}, "slow");
 }
 });
}

4，php程式碼部分 資料的取得都是透過do.php來完成，do.php根據前端頁面傳遞的參數，連接資料庫，根據條件判斷分別進入「頂」、「踩」和初始資料處理模組，以下是do.php模組程式碼結構：

include_once("connect.php");//連接資料庫

$action = $_GEGET[' action'];
$id = 1;
$ip = get_client_ip();//取得ip

if($action=='like'){//頂
 likes (1,$id,$ip);
}elseif($action=='unlike'){//踩
 likes(0,$id,$ip);
}else{
 echo jsons($id);
}

函數likes()用來處理「頂」和「踩」投票模組，首先是判斷用戶IP是否已經投票過了，如果已經投票則直接返回相應提示，如果用戶IP沒有投票記錄則更新votes表，將對應的投票數加1，然後向votes_ip表中插入該用戶的IP記錄，如果操作成功，則呼叫jsons()輸出投票後的投票數和所佔百分比等數據，否則輸入操作失敗的提示訊息。

function likes($type,$id,$ip){
 $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'");
 $count=mysql_num_rows($ip_sql);
 if($count==0){//還沒頂過
 if($type==1){//上
 $sql = "update votes set likes=likes+1 其中 id=".$id;
 }else{//踩
 $sql = "update votes set unlikes=unlikes+1 where id=".$id;
 }
 mysql_query($sql);

 $sql_in = "insert into votes_ip (vid,,ip) values ( '$id','$ip')";
 mysql_query($sql_in);

 if(mysql_insert_id()>0){
 echo jsons($id);
 } else{
 $arr['success'] = 0;
 $arr['msg'] = '操作失敗，請重試';
 echo json_encode($arr);
 }
 }else{
 $msg = $type==1?'您已經頂過了':'您已經踩過了';
 $arr['success'] = 0;
 $ arr['msg'] = $msg;
        echo json_encode($arr);
    }
}

函數jsons()用來讀取votes表中對應id的投票數，併計算百分比，最後將這些資訊以json格式輸出，供前端頁面使用。

function jsons($id){
 $query = mysql_query("select * from votes where id=".$ id);
 $row = mysql_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);
}

該實例可以應用到常見的"讚"、同意和在反對評論、投票系統等場景中，運用了Ajax原理實現的前後端互動功能。 do.php中也有函數get_client_ip()用來取得使用者真實IP，在本文提供的源碼包中，大家可以下載研究下。