文档章节

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

skyheng
 skyheng
发布于 2016/08/02 09:13
字数 612
阅读 147
收藏 0

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

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


网页代码:

这个是根据数据库中是否可以点赞来限制能不能点的,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;

	}

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);
上采用了封装的。




本文转载自:http://blog.csdn.net/skychenjh/article/details/46693461

共有 人打赏支持
skyheng
粉丝 0
博文 18
码字总数 0
作品 0
深圳
程序员
不到50行代码实现一个能对请求并发数做限制的通用RequestDecorator

使用场景 在开发中,我们可能会遇到一些对异步请求数做并发量限制的场景,比如说微信小程序的request并发最多为5个,又或者我们需要做一些批量处理的工作,可是我们又不想同时对服务器发出太...

陈纪庚
09/13
0
0
qq引流新技能

六年互联网创业经历,操作过很多具体的项目,也做过互联网营销。作为学习者,这期间一直关注卢松松博客,伴随着我整个创业历程。这里分享一个相当牛的引流方法,具体的执行需要大家仔细琢磨。...

卢松松博客
2017/10/31
0
0
golang使用chan限制多协程单位时执行次数

golang使用chan限制多协程单位时执行次数 海运的博客2017-08-1013 阅读 golang单位限制 限制单位时间内执行次数,并保持先后顺序。 点赞 golang单位限制 作者:海运的博客 个人笔记 原文地址...

海运的博客
2017/08/10
0
0
Java 回调函数的使用

回调函数 回调函数是什么鬼, 回调函数干嘛用,回调函数可以怎么用 如果有过android开发经验,经常可以看到一些类似下面的代码 上面注册的监听器其实就包含了这个回调的意味了。 软件模块之间...

小灰灰Blog
2016/04/05
151
0
Flutter入门——山寨掘金(一)| 掘金技术征文

写在前面 之前发了一篇文章——《用Flutter山寨一下掘金》,由于是自己学习Flutter时的练手项目,文中完全没有写过程,只将源码上传到了GitHub。现受掘金邀请,将文章写成入门教程,让对Flu...

MeFelixWang
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

负载均衡的解决方案有哪些

负载均衡器服务可满足大型组织的需求,支持所有数据中心和跨数据中心高可靠性场景。 本地负载均衡,通过附带或者未附带持久性覆盖选项,Incapsula支持各种负载均衡算法,以优化服务器之间的流...

上树的熊
17分钟前
1
0
Java实现在线打开word文档加盖印章/盖章/签名功能

前言: 我们知道,大型一点的OA办公系统都会有很多在线处理office办公文档的需求。其中有一点也基本绕不开,那就是为文档盖章或添加手写签名来保护文档,让被盖章的文档不再被编辑。 在Java中...

山里的红杏
25分钟前
4
0
js控制输入正负数,小数点后保留两位

//限制数字function clearNoNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.'){ obj.value=""; } obj.value ...

一直在成长的程序猿
28分钟前
1
0
动态代理

具体场景 为了使代理类与被代理类对第三方有相同的函数,代理类与被代理类一般实现一个公共的interface,定义如下 public interface Subject { void rent(); void hello(String s)...

wuyiyi
31分钟前
0
0
时间字段

我们看看这几个数据库中(mysql、oracle和sqlserver)如何表示时间 mysql数据库:它们分别是 date、datetime、time、timestamp和year。date :“yyyy-mm-dd”格式表示的日期值 time :“hh:...

DemonsI
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部