文档章节

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

skyheng
 skyheng
发布于 2016/08/02 09:13
字数 612
阅读 129
收藏 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
深圳
程序员
qq引流新技能

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

卢松松博客
2017/10/31
0
0
Java 回调函数的使用

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

小灰灰Blog
2016/04/05
151
0
golang使用chan限制多协程单位时执行次数

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

海运的博客
2017/08/10
0
0
Flutter入门——山寨掘金(一)| 掘金技术征文

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

MeFelixWang
07/24
0
0
Xiuno BBS 3.0 轻论坛程序正式版发布

前面的话: 经过一个月对测试版本的修复,Xiuno BBS 3.0 终于迎来了它的正式版,今天是 9.1,我想起了 1985.9.1 那一天,我亲爱的父母送我上小学的第一天,我瘦小的身体,背着一个带子长长的...

strwei
2015/09/24
182.7K
51

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
2
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
5
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部