文档章节

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

skyheng
 skyheng
发布于 2016/08/02 09:13
字数 612
阅读 119
收藏 0
点赞 0
评论 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

golang使用chan限制多协程单位时执行次数

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

海运的博客 ⋅ 2017/08/10 ⋅ 0

Java 回调函数的使用

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

小灰灰Blog ⋅ 2016/04/05 ⋅ 0

Xiuno BBS 3.0 轻论坛程序正式版发布

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

strwei ⋅ 2015/09/24 ⋅ 51

Active Job 进阶

Active Job 进阶 脱线道士维克多2017-11-302 阅读 rails 常见场景 有很多常见的设计模式和任务场景会需要用到队列。如果一个任务不需要现在立刻返回处理结果或者处理需要很长时间,那就说明需...

脱线道士维克多 ⋅ 2017/11/30 ⋅ 0

网站遭受CC攻击的解决办法

前两天,网站的注册发送手机短信验证码的接口受到攻击,一个半小时,1万条短信都发出去了。可见,我们的安全防护做的多么不好。 分析攻击方式: 1) 多台机器模拟人工操作,随机输入手机号,...

yy20031205 ⋅ 2016/10/03 ⋅ 0

信息列表+上传文件

根据标题类型进行筛选 url设计: 前端页面设计: 后台设计:

a2011480169 ⋅ 2017/10/06 ⋅ 0

MariaDB MaxScale 2.1 GA 发布,数据库智能代理

MariaDB MaxScale 2.1 GA 版本发布,MaxScale 是 MariaDB 的下一代数据库代理。 该版本引入了以下新特性: 1、动态配置 MaxScale 2.1 支持动态配置 Server、 monitor 和 listeners ,可在运行...

王练 ⋅ 2017/05/25 ⋅ 7

Redux-thunk快速入门

前言 最近刚刚完成了毕业答辩,我的毕设内容是基于React系列技术栈开发的一个类似Instagram的Web App,戳此看看。开发完后,我惊奇的发现:咦,之前就听说有个叫做redux-thunk的东西,我怎么没...

Guohjia ⋅ 05/22 ⋅ 0

用redis实现社交产品中计数器

社交产品业务里有很多统计计数的功能,比如: 用户: 总点赞数,关注数,粉丝数 帖子: 点赞数,评论数,热度 消息: 已读,未读,红点消息数 话题: 阅读数,帖子数,收藏数 实时性要求高 ...

jockchou ⋅ 2015/07/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 7分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 13分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 15分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 24分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 27分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 49分钟前 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 54分钟前 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部