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);
});
});
|
|
收藏
淘帖
踩
