自己写项目的时候了用到了这个点赞与取消赞的功能,然后突然心血来潮,想在这里写篇博客,也算是小小的总结一下,废话不多说了,给大家上图上码才是重点。
下图是知乎里面的我的文章的截图,现在就是要实现他的点赞功能。
下图是我自己写的页面
jsp页面点赞那一块的代码:
<div class="bjbtdiv">
<button class="bjbutton firstby" my="0"><span class="am-icon-thumbs-o-up"> </span><span>0</span></button>
<button class="bjbutton ContentItem-action showComment"><span class="am-icon-comment-o"></span> <span>添加评论</span></button>
<button class="bjbutton ContentItem-action"><span class="am-icon-share-alt"></span> <span>分享</span></button>
<button class="bjbutton ContentItem-action"><span class="am-icon-star"></span> <span>收藏</span></button>
<button class="bjbutton ContentItem-action backtxt"><span>收起</span> <span class="am-icon-angle-up"></span></button>
</div>
jQuery代码:
$(".firstby").click(function(){
var laud = $(this).children().eq(1).text(); //获取当前的赞的数量
var obj = $(this).children().eq(1); //获取当前的点击对象
var my = $(this); //自定义的属性,用来判断点赞的状态
$.ajax({
url:"/zheye/laud.do", //发送 ajax请求到后台
data:{userId:"${CURRENT_USER.userId}"}, //这里是我之前将当前用户对象放入了session作用域中,这里把用户id取出来传给后台
success:function(data){ //data是后台返回的数据
if(data=="nowuser"){
console.log("自己不能点赞");
}else if(data=="notnowuser"){
if(my.attr("my")==0){ //my初始值为0,即可以点赞的状态
console.log("非当前用户点赞");
obj.text(parseInt(laud)+1);
my.attr("my","1"); //点赞成功后,将其改为1,即不可点赞状态
}else{
console.log("非当前用户取消赞");
obj.text(parseInt(laud-1));
my.attr("my","0"); //当取消赞之后,又将其置为0
}
}
}
})
})
控制器代码:
@RequestMapping("/laud.do")
@ResponseBody
public String laud(int userId,HttpSession session){
User usernow = (User)session.getAttribute("CURRENT_USER");
if(userId==usernow.getUserId()){
return "nowuser"; //是当前用户自己
}else{
return "notnowuser"; //不是本身
}
}
简单的实现了一下点赞的功能,这里还没有将数据存入到数据库中,晚点有时间再补充进来吧,第一次写博客,也算是自己对知识的一次总结和巩固,如果有什么问题,可以私我,一起学习,一起进步!