springmvc与ajax交互实现点赞

迈不过友情╰ 2022-03-20 09:44 219阅读 1赞

操作的相关表有：评论表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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]: /images/20220320/efcfecddcb07408bac85ed65b663bd10.png