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

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

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

网页代码：

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

<span class="pull-right">    <c:choose>        <c:when test="${strlist.dzFlag==1}">            <a href="javascript:void(0)" onclick="praise('${strlist.id}','${strlist.dzCount}')"            class="btn btn-default btn-xs">                赞                <span id="praiseNo${strlist.id}">                    ${strlist.dzCount}                </span>            </a>        </c:when>        <c:otherwise>            <a href="javascript:void(0)" class="btn btn-default btn-xs">                赞                <span id="strategyPraiseNo">                    ${strlist.dzCount}                </span>            </a>        </c:otherwise>    </c:choose></span>

Ajax请求的Js脚本：

<script type="text/javascript">    function praise(recordNo, praiseCount) {        $.ajax({            url: '${ctx}/country/pointPraise',            type: 'POST',            data: {                'recordNo': recordNo            },            dataType: "JSON",            success: function(d) {                if (d.success) {                    var strategyPraiseNo = parseInt(praiseCount) + 1;                    $('#praiseNo' + recordNo).html(strategyPraiseNo)                }            },            error: function(XMLHttpRequest, textStatus, errorThrown) {                bootbox.alert("无法连接服务器:" + textStatus);            }        });    }</script>

Java代码：

Dao类接口层

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

Dao类实现层

        @Overridepublic void updateDzCount(HashMap<String, Object> mapNo) {this.update("updateDzCount", mapNo);}

service类接口层

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

service类实现层

@Overridepublic boolean updateDzCount(HashMap<String, Object> mapNo) {logger.info("***** BlogServiceImpl.updateDzCount() method begin*****");boolean flag = true;try {blogDao.updateDzCount(mapNo);} catch (Exception e) {logger.error("------updateDzCount error:", e);e.printStackTrace();return false;}logger.info("***** BlogServiceImpl.updateDzCount() method end*****");return flag;}

Action类处理层代码

/** * @Title: pointPraise * @Description: 修改文章点赞 * @author CHENJH * @date 2015年6月27日 */@SkipCheck@Action("pointPraise")public void pointPraise() {String recordNo = getParam("recordNo");// 获取文章信息编号HashMap<String, Object> mapNo = getSessionValue("recordNoMap");// 得到文章点赞集合Boolean bool = false;if (mapNo != null) {if (mapNo.get(recordNo) == null) {// 判断集合中是否存在改编号点赞mapNo.put(recordNo, recordNo);bool = true;}} else {// 未进行点赞mapNo = new HashMap<String, Object>();mapNo.put(recordNo, recordNo);setSessionAttr("recordNoMap", mapNo);bool = true;}if (bool) {// 可以点赞mapNo.put("recordNo", recordNo);// 点赞更新值bool = blogService.updateDzCount(mapNo);}outputJsons("success", bool);}

MyBatis3映射文件SQL语句

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

注：项目采用Maven开发，

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