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;
 }