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类实现层

        @Override
	public 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类实现层

@Override
	public 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;

	}

/**
	 * @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);

	}

<!--文章点赞后修改数量-->
<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);
上采用了封装的。