Ajax+jQuery+bootstrap+Java实现异步点赞功能，并限制点击次数

(下面截图是自己项目的截图)

当已经点赞后，鼠标再经过时，就会显示 "禁止的图标"  (相应的class 会变化)

cursor:not-allowed

在很多的网站上有很多不同的点赞，我不知道他们是怎么实现的，下面我来分享一下我写的点赞实现，共大家参考下，

这是我在一个项目抽取的代码，可能有些样式会发生变化，但是功能不会影响。

网页代码：

这个是根据数据库中是否可以点赞来限制能不能点的，strlist是从Java后台返回的一个请求。在这里取出点赞数和文章点赞的编号做为参数到Ajax上

[html]  view plain  copy

1. <span class="pull-right">  
2.     <c:choose>  
3.         <c:when test="${strlist.dzFlag==1}">  
4.             <a href="javascript:void(0)" onclick="praise('${strlist.id}','${strlist.dzCount}')"  
5.             class="btn btn-default btn-xs">  
6.                 赞  
7.                 <span id="praiseNo${strlist.id}">  
8.                     ${strlist.dzCount}  
9.                 </span>  
10.             </a>  
11.         </c:when>  
12.         <c:otherwise>  
13.             <a href="javascript:void(0)" class="btn btn-default btn-xs">  
14.                 赞  
15.                 <span id="strategyPraiseNo">  
16.                     ${strlist.dzCount}  
17.                 </span>  
18.             </a>  
19.         </c:otherwise>  
20.     </c:choose>  
21. </span>  

Ajax请求的Js脚本：

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.     function praise(recordNo, praiseCount) {  
3.         $.ajax({  
4.             url: '${ctx}/country/pointPraise',  
5.             type: 'POST',  
6.             data: {  
7.                 'recordNo': recordNo  
8.             },  
9.             dataType: "JSON",  
10.             success: function(d) {  
11.                 if (d.success) {  
12.                     var strategyPraiseNo = parseInt(praiseCount) + 1;  
13.                     $('#praiseNo' + recordNo).html(strategyPraiseNo)  
14.                 }  
15.             },  
16.             error: function(XMLHttpRequest, textStatus, errorThrown) {  
17.                 bootbox.alert("无法连接服务器:" + textStatus);  
18.             }  
19.         });  
20.     }  
21. </script>  

Java代码：

Dao类接口层

[java]  view plain  copy

1. <pre name="code" class="java">/** 
2.      * @Title: updateDzCount  
3.      * @Description:点击赞后更改赞的数量 
4.      * @param mapNo  
5.      * @author CHENJH 
6.      * @date 2015年6月27日 
7.      */  
8.     public void updateDzCount(HashMap<String, Object> mapNo);  

Dao类实现层

[java]  view plain  copy

1.       @Override  
2. ublic void updateDzCount(HashMap<String, Object> mapNo) {  
3. this.update("updateDzCount", mapNo);  

service类接口层

[java]  view plain  copy

1. /** 
2.      * @Title: updateDzCount 
3.      * @Description:点击赞后更改赞的数量 
4.      * @param recordNo 
5.      * @author CHENJH 
6.      * @date 2015年6月25日 
7.      */  
8.     public boolean updateDzCount(HashMap<String, Object> mapNo);  

service类实现层

[java]  view plain  copy

1. @Override  
2.     public boolean updateDzCount(HashMap<String, Object> mapNo) {  
3.         logger.info("***** BlogServiceImpl.updateDzCount() method begin*****");  
4.         boolean flag = true;  
5.         try {  
6.             blogDao.updateDzCount(mapNo);  
7.         } catch (Exception e) {  
8.             logger.error("------updateDzCount error:", e);  
9.             e.printStackTrace();  
10.             return false;  
11.         }  
12.         logger.info("***** BlogServiceImpl.updateDzCount() method end*****");  
13.         return flag;  
14.   
15.     }  

Action类处理层代码

[java]  view plain  copy

1. /** 
2.      * @Title: pointPraise 
3.      * @Description: 修改文章点赞 
4.      * @author CHENJH 
5.      * @date 2015年6月27日 
6.      */  
7.     @SkipCheck  
8.     @Action("pointPraise")  
9.     public void pointPraise() {  
10.         String recordNo = getParam("recordNo");// 获取文章信息编号  
11.         HashMap<String, Object> mapNo = getSessionValue("recordNoMap");// 得到文章点赞集合  
12.         Boolean bool = false;  
13.         if (mapNo != null) {  
14.             if (mapNo.get(recordNo) == null) {// 判断集合中是否存在改编号点赞  
15.                 mapNo.put(recordNo, recordNo);  
16.                 bool = true;  
17.             }  
18.         } else {// 未进行点赞  
19.             mapNo = new HashMap<String, Object>();  
20.             mapNo.put(recordNo, recordNo);  
21.             setSessionAttr("recordNoMap", mapNo);  
22.             bool = true;  
23.         }  
24.         if (bool) {// 可以点赞  
25.             mapNo.put("recordNo", recordNo);  
26.             // 点赞更新值  
27.             bool = blogService.updateDzCount(mapNo);  
28.         }  
29.         outputJsons("success", bool);  
30.   
31.     }  

MyBatis3映射文件SQL语句

[html]  view plain  copy

1. <!--文章点赞后修改数量-->  
2. <update id="updateDzCount" parameterType="map">  
3.      update TAB_攻略表 set  
4.         点赞次数=((select 点赞次数 from TAB_攻略表 where 记录编号 = #{recordNo,jdbcType=VARCHAR})+1)  
5.         where 记录编号 = #{recordNo,jdbcType=VARCHAR}   
6. </update>  

注：项目采用Maven开发，

[java]  view plain  copy

1. this.update("updateDzCount", mapNo);  
2. 上采用了封装的。