实现赞,踩功能需要的一些需求:
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,然后到服务端取的就是这个文章下边的赞和踩数量了)
当投票失败的时候,会将从服务端获取的失败信息,已渐淡的动画效果显示在页面上。
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");
}
});
}
剩下的jquery执行代码
$(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;
PHP代码
(连接数据库的那一部分代码,我没有贴出来)
$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);
}
实现效果就是这个样子