springmvc与ajax交互 实现点赞
操作的相关表有：评论表comment，用户表user，点赞表like
如果用户对哪条评论点赞，在like表添加对应记录，取消点赞则删除点赞记录。（两种情况）
1.访问点赞页面，遍历查询用户对哪条评论点过赞
底层采用的查询语句是采用 left jion on
String sql="SELECT `comment`.*, `like`.COMMENT_ID,`like`.USER_ID uid ,`like`.ID likeid,`user`.* from comment LEFT JOIN `like` ON `comment`.DELETE_STATUS=1 and `comment`.ID=`like`.COMMENT_ID AND `like`.USER_ID="+userid+" LEFT JOIN `user` ON `user`.ID=`comment`.USER_ID where `comment`.ITEM_ID="+itemid+" ORDER BY comment.CREATE_TIME DESC LIMIT "+pager.getStart()+ ","+pager.getPageSize();
jsp遍历
<c:forEach items="${commentlist}" var="comment1">
<div class="find_list">
<div class="find_list_tit">
<div class="find_list_tit_img" style="background-image:url(${APP_PATH}/${comment1.HEAD_ADDRESS})"></div>
<div class="find_list_tit_txt"><p>${comment1.NICK_NAME}</p>
<span><fmt:formatDate value="${comment1.COMMENT_TIME}" pattern="yyyy-MM-dd HH:mm" /></span></div>
</div>
<div class="find_list_txt">
<p>${comment1.COMMENT_INFO}</p>
</div>
<div class="find_list_img find_list_img_4">
<ul>
<c:forEach items="${comment1.img}" var="commentImg">
<li><a style="background-image:url(${APP_PATH}/${commentImg})"></a></li>
</c:forEach>
</ul>
<span>${comment1.ITEM_STANDARD}</span>
</div>
<div class="find_list_but">
<div class="find_list_but_left"><span id="span${comment1.ID}">${comment1.LIKE_NUM}</span>人认为有用</div>
<c:if test="${comment1.uid==userId}">
<div class="find_list_but_right">
<a href="#1" id="zhan_yes${comment1.ID}" class="zhan_yes" οnclick="quxiao('${comment1.ID}')">取消</a>
<a href="#1" id="zhan_no${comment1.ID}" class="zhan_no" οnclick="dianzan('${comment1.ID}')" style="display: none">有用</a>
<input type="text" style="display:none;" value="${comment1.ID}"/></div>
</c:if>
<c:if test="${empty comment1.uid}">
<div class="find_list_but_right">
<a href="#1" id="zhan_no${comment1.ID}" class="zhan_no" οnclick="dianzan('${comment1.ID}')">有用</a>
<a href="#1" id="zhan_yes${comment1.ID}" class="zhan_yes" οnclick="quxiao('${comment1.ID}')" style="display: none">取消</a>
<input type="text" style="display:none;" value="${comment1.ID}"/></div>
</c:if>
</div>
</div>
</c:forEach>
2.ajax 实现点赞和取消点赞
//取消赞
//===============================================
function quxiao(index){
var nu=0;
$('#zhan_yes'+index).hide();
$('#zhan_no'+index).show();
$('#zhan_yess'+index).hide();
$('#zhan_noo'+index).show();
//$('#span'+index).html(114);
var pan=$('#span'+index).text();
$.ajax({
type : "GET",
url : "${APP_PATH}/fore/like.cs",
data :{'commentid':index,'num':nu},
dataType: "json",
success:function(data) {
if (data && data.success == "true") {
if(data.status=='0'){
pan--;
$('#span'+index).html(pan);
$('#spann'+index).html(pan);
}
}
},
error:function(d, errorThrown) {// 失败的时候要执行的函数
alert("失败");
}
});
}
//点赞
function dianzan(index){
var nu=1;
$('#zhan_no'+index).hide();
$('#zhan_yes'+index).show();
$('#zhan_noo'+index).hide();
$('#zhan_yess'+index).show();
//$('#span'+index).html(115);
var pan=$('#span'+index).text();
// alert(pan);
$.ajax({
type : "GET",
url : "${APP_PATH}/fore/like.cs",
data :{'commentid':index,'num':nu},
dataType: "json",
success:function(data) {
if (data && data.success == "true") {
if(data.status=='1'){
pan++;
$('#span'+index).html(pan);
$('#spann'+index).html(pan);
}
}
},
error:function(d, errorThrown) {// 失败的时候要执行的函数
alert("失败");
}
});
}
3,controlle层处理请求
//点赞
@ResponseBody
@RequestMapping("/like")
public Map<String, Object> like(int commentid,HttpSession session,int num){
Map<String,Object> map = new HashMap<String,Object>();
if(num==1||num==0){
int userid= (int) session.getAttribute("userId");
commentService.updateLikes(num,commentid,userid);
}
if(num==0){
map.put("status", 0);
}if(num==1){
//加一
map.put("status", 1);
}
map.put("success", "true");
return map;
}