Ajax+SSM实现点赞功能

前言：读者可以参考我的逻辑思路，以及ajax代码，具体代码需在自己实现

1、建立数据库

CREATE TABLE favorite_info
(
   user_id              INT(4),
   activ_id             INT(4)
);

2、service接口

// 添加点赞信息 √ 
	public boolean addFavoriteInfo(Integer userId, Integer activId);
	
//删除点赞信息 √
	public boolean deleteFavoriteInfo(Integer userId, Integer activId);

注意：mapper中的sql语句可以自己实现：就是插入和删除数据

3、serviceImpl类

/**
	 * 添加点赞信息
	 */
	@Override
	public boolean addFavoriteInfo(Integer userId, Integer activId) {
		FavoriteInfo favorInfo = new FavoriteInfo(userId, activId);
		//插入数据
		if(favoriteInfoMapper.insert(favorInfo) == 1) {
		//由于我是对于活动进行点赞，读者可以自行修改
			activityService.updateActivFavorInfoSelfByPrimaryKey(activId, 1);
			return true;
		}else return false;
	}

	/**
	 * 删除点赞信息
	 */
	@Override
	public boolean deleteFavoriteInfo(Integer userId, Integer activId) {
		FavoriteInfo favorInfo = new FavoriteInfo(userId, activId);
		if(favoriteInfoMapper.delete(favorInfo) != 0) {
			activityService.updateActivFavorInfoSelfByPrimaryKey(activId, 0);
			return true;
		}else return false;
	}

4、controller方法【核心】

/**
	 * 点赞
	 * 
	 * @return
	 * @throws IOException
	 */

	@RequestMapping(value = "/addFavoriteInfo", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String addFavoriteInfo(@RequestParam("activId") Integer activId,@RequestParam("isFavor") String isFavor, HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		String result = null;
		//获取用户
		User user =  (User) request.getSession().getAttribute("user");
		if (user == null) {
			result = "请先登录，后点赞";
			return result;
		}
		if(isFavor.equals("点赞")) {
			//点赞addFavoriteInfo
			favoriteInfoService.addFavoriteInfo(user.getUserId(), activId);
			result =  "已点赞";
		}else {
			//点赞
			favoriteInfoService.deleteFavoriteInfo(user.getUserId(), activId);
			result = "点赞";
		}
		return result;
	}

5、前端页面

js【主要】

<script type="text/javascript"
	src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	var id = $("#activId").text();//获取活动id
	var sum = $("#num").text();//获取当前赞的数量，这里获取的是字符串
	var bt1 = $("#fav").text(); 
	$("#fav").click(function() {//给button设置点击事件
		$.ajax({
			url : "${APP_PATH }/addFavoriteInfo",//这个对应Controller的URL，和你们以前表单里面的action一样
			data : { //data就是你想要传什么数据到Controller层，这里的数据是json数据。
				activId : id,
				isFavor:bt1
			},
			type : "POST", //类型，POST或者GET,就和表单与超链接一样
			dataType : 'text', //Controller层返回类型，如果返回String，就用text,返回json,就用json
			success : function(data) { //成功，回调函数
				alert(data);//可以用data调用Controller返回的值
				if(data == "已点赞"){
					sum = parseInt(sum) + 1;
					$("#num").html(sum);
					$("#fav").html(data);
					bt1 = data;
				}
				if(data == "点赞"){
					sum = parseInt(sum) - 1;
					$("#num").html(sum);
					$("#fav").html(data);
					bt1 = data;
				}
			},
			error : function() { //失败，回调函数
				alert("程序出错。。。");
			}
		})
	});
})
</script>

html

<div>
			<c:if test="${!empty sessionScope.user}">
					<button id="fav">${requestScope.isF}</button>
			</c:if>
			<c:if test="${empty sessionScope.user}">
				<button id="fav">点赞</button>
			</c:if>
			<span id="num">${activity.favorNum}</span> <br> <span
				id="activId">${activity.activId}</span> <span id="isFavor">${requestScope.isFavor}</span>
		</div>

参考链接：https://www.cnblogs.com/fangyunchen/p/9773594.html