《PHP教程：用php和jQuery來實現“頂”和“踩”的投票功能》要點：
本文介紹了PHP教程：用php和jQuery來實現“頂”和“踩”的投票功能，希望對您有用。如果有疑問，可以聯系我們。
PHP教程?當我們瀏覽網頁時,我們想對網頁內容如文章、評論中的觀點持贊同或反對意見時,可以通過點擊網頁中的“頂”和“踩”來進行投票.而整個交互過程,開發者可以通過ajax異步來實現,從而提高用戶體驗.
PHP教程我們先要準備為整個實例運行所需的mysql數據表,實例中需要兩個表,votes表用來記錄對應文章或評論的用戶投票數,并且我們默認寫入一條id為1的數據以便演示,votes_ip表用來記錄用戶每次投票的IP,程序根據用戶IP決定投票是否有效.
PHP教程數據表
PHP教程
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,
`vid` int(10) NOT NULL,
`ip` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
PHP教程HTML
PHP教程在頁面中,有兩個分別表示“頂”和“踩”的按鈕,即#dig_up和#dig_down,按鈕上記錄了投票的票數以及分別所占的百分比,非常直觀的對比投票結果.
PHP教程
<div class="digg">
<div id="dig_up" class="digup">
<span id="num_up"></span>
<p>很好,很強大!</p>
<div id="bar_up" class="bar"><span></span><i></i></div>
</div>
<div id="dig_down" class="digdown">
<span id="num_down"></span>
<p>太差勁了!</p>
<div id="bar_down" class="bar"><span></span><i></i></div>
</div>
<div id="msg"></div>
</div>
PHP教程CSS
PHP教程我們必須使用CSS來美化頁面,我們使用一張圖diggs.png來定位不同的按鈕背景,通過設置position來定位各元素之間的位置關系.
PHP教程
.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative}
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative;
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer}
.digup{background:url(diggs.png) no-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:block; height:12px; }
.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}
PHP教程jQuery
PHP教程本示例還依賴于jQuery,因此一定不能忘了在頁面中先載入jquery庫文件.
首先,jQuery要處理的是鼠標分別滑向兩個投票按鈕時變換的背景圖片,通過addClass()和removeClass()來實現.
PHP教程
$(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);
});
});
PHP教程然后,我們初始化數據,就是頁面加載后,要顯示初始的已經投票的結果,包括各投票數和所占百分比.我們將獲取數據的操作寫在一個自定義函數getdata()中,通過傳遞不同的請求地址和id參數來完成數據的載入.函數getdata()中,向URL發送一個ajax請求,根據后臺處理的返回結果,如果投票成功則更改頁面中相應的元素內容,包括投票數和所占百分比.
PHP教程
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{//投票失敗
$("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'})
.animate({top:'-50px',opacity:0}, "slow");
}
});
}
PHP教程PHP
PHP教程數據的獲取都是通過do.php來完成,do.php根據前端頁面傳遞的參數,連接數據庫,根據條件判斷分別進入“頂”、“踩”和初始數據處理模塊,以下是do.php模塊代碼結構：
PHP教程
include_once("connect.php");//連接數據庫
$action = $_GET['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);
}
PHP教程函數likes()用來處理“頂”和“踩”投票模塊,首先是判斷用戶IP是否已經投票過了,如果已經投票則直接返回相應提示,如果用戶IP沒有投票記錄則更新votes表,將對應的投票數加1,然后向votes_ip表中插入該用戶的IP記錄,如果操作成功,則調用jsons()輸出投票后的投票數和所占百分比等數據,否則輸入操作失敗的提示信息.
