PHP、MySql、jQuery 實現「頂」與「踩」投票功能-php教程-PHP中文網

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

WBOY

發布： 2016-07-25 08:55:30

原創

851 人瀏覽過

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,

`vid` int(10) NOT NULL,

`ip` varchar(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8;) ENGINE=MyISAM DEFAULT CHARSET=utf8;

) 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;

.bar i{position:absolute; top:0; left:104px;}

#bar_up span{background:#360} #bar_down span{background:#f60} #msg{ position:absolute; right:20px; top:40px; font-size:18px; color:#f00}

複製程式碼

複製程式碼
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_up").click(function(){

getdata("do.php?action=like",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()輸出投票後的投票數和所佔百分比等數據，否則輸入操作失敗的提示訊息。