ssm下用ajax实现点赞功能，用onclick传值，以及onclick点击事件不触发的解决办法

最近用ssm框架在尝试做一个关于新闻网站的设计时，需要用到对某条新闻的点赞功能，具体要求如下：
1、当已登录用户进入新闻详情页面时，需要直接显示用户是否点过赞，如果点过，则显示取消点赞，否则显示点赞
2、当用户点赞后，显示为取消点赞，再次点击后显示为点赞，不断变化，并同时动态修改数据库。
方法如下：
1、首先建立一张表，里面是用户id，新闻id，序号
2、然后建立相应的dao层，如图：

package bs.dao;

import org.apache.ibatis.annotations.Param;

import bs.bean.Prise;

public interface PriseDao {
	
	public int priseUpdate(Prise prise);
	public int priseDelete(@Param("prise_id") int prise_id);
	public Prise selectByUserAndNews(@Param("news_id")int news_id,@Param("user_id")int user_id);
}

然后建立相应的service层和serviceImpl层，主要是serviceimpl层，这里只放上这个代码

package bs.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import bs.bean.News;
import bs.bean.Prise;
import bs.dao.NewsDao;
import bs.dao.PriseDao;
import bs.service.PriseService;
@Service
@Transactional
public class PriseServiceImpl implements PriseService {
	@Autowired
	private PriseDao prisedao;
	@Autowired
	private NewsDao newsdao;
	@Override
	public int priseUpdate(int news_id,int user_id) {
		
		Prise prise = prisedao.selectByUserAndNews(news_id, user_id);
		News news = newsdao.findById(news_id);
		System.out.println(prise);
		if(prise==null){
			Prise prise1 = new Prise();
			prise1.setNews_id(news_id);
			prise1.setUser_id(user_id);
			prisedao.priseUpdate(prise1);
			System.out.println("prise更新了");
			prise1 = prisedao.selectByUserAndNews(news_id, user_id);
			System.out.println("更新后的prise:"+prise1);
			newsdao.updatelikeCount(news_id,news.getNews_like()+1);
			return 1;//加入该点赞
		}else{
			prisedao.priseDelete(prise.getPrise_id());
			newsdao.updatelikeCount(news_id, news.getNews_like()-1);
			return 0;//取消该点赞
		}
		
	}

	@Override
	public int priseDelete(int prise_id) {
		this.prisedao.priseDelete(prise_id);
		return 0;
	}

	@Override
	public Prise selectByUserAndNews(int news_id, int user_id) {
		
		return this.prisedao.selectByUserAndNews(news_id, user_id);
	}

}

3、接下来就是controller了，因为想要用户查看某条新闻时就可以显示是否点过赞，所以这里放上从用户点击新闻时后台的流程
NewsController中：

// 点击具体某条新闻
	@RequestMapping(value = "/findById")
	public String findById(@RequestParam(value = "news_id") String news_id, Model model, HttpServletRequest request,RedirectAttributes attr) {
		News news = new News();
		System.out.println("news_id:" + news_id);
		int id = Integer.parseInt(news_id);
		service.updateCount(id);
		news = service.findById(id);
		
		// ("news:" + news);
		model.addAttribute("news", news);		
		attr.addFlashAttribute("news", news);
		String username = "";
		if (request.getSession().getAttribute("username") != null) {
			username = request.getSession().getAttribute("username").toString();
		}
		if (!username.contentEquals("")) {
			System.out.println("进入已登录具体新闻页");
			return "redirect:/Prise/selectprise";
		} else {
			System.out.println("进入未登录具体新闻页");
			return "news_visit";
		}
	}

然后是点赞的PriseController

@RequestMapping(value = "/selectprise")
	public String selectprise(HttpServletRequest request,@ModelAttribute("news") News news,Model model,RedirectAttributes attr){
		int user_id = Integer.parseInt((request.getSession().getAttribute("user_id")).toString());
		int news_id = news.getNews_id();
		Prise prise = service.selectByUserAndNews(news_id, user_id);
		int p;
		if(prise==null){
			//没有点赞
			System.out.println("p=0");
			p=0;
			model.addAttribute("p", 0);
		}else{
			//已经点过赞了
			System.out.println("p=1");
			p=1;
			model.addAttribute("p", 1);
		}
		attr.addFlashAttribute("p", p);
		attr.addFlashAttribute("news", news);
		return "redirect:/Collect/selectcollect";
	}

这里面又添加了一个重定向，因为后来又加了一张收藏表，不需要这个功能的小伙伴们可以直接返回页面。
接下来就是jsp页面的设计了，因为以前没有接触过ajax，看完很多大佬的介绍，刚开始的代码如下：

<a href="javascript:void(0);" id="nd"  class="ui label item"        onclick="changePrise(this)"  news_id=${news.news_id}><i class="thumbs up icon"></i>
${p eq 0?"点赞":"取消点赞"} 
</a>

js的代码是这样的（注意前面要引入）：

function changePrise(obj){
			var thobj = $(obj);  //获取当前的点击对象
			console.log("获取到对象");
			var news_id = thobj.attr("news_id");
			console.log("news_id"+news_id);
			$.ajax({
				type:'post',
		        url: '<%=()%>/Prise/update?news_id=' + news_id,
		        error: function (XMLHttpRequest, textStatus, errorThrown) {
		          console.log(XMLHttpRequest);
		          console.log(textStatus);
		          console.log(errorThrown);
		        },
		        success: function (data) {
		        	console.log(data);
		          if(data==1) {
		        	  $("#nd").html("<i class='thumbs up icon'></i>取消点赞");
		          }else{
		        	  $("#nd").html("<i class='thumbs outline up icon'></i>点赞");
		          } 	
		        }
			});
		}

运行

后台controller的页面是这样的：

@RequestMapping(value = "/update")
	public @ResponseBody int changePrise(HttpServletRequest request, @RequestParam("news_id") int news_id){
		int user_id = Integer.parseInt((request.getSession().getAttribute("user_id")).toString());
		int i = service.priseUpdate(news_id, user_id);
		return i;
	}

但是发现页面上的a链接点击根本没有反应，连console.log()语句都没有触发，艰难的百度了一天资料，最后偶然间把js部分的代码改了一下，不再在a标签上直接放onclick：

$("#nd").click(function changePrise(){
			var obj = $(this).children().eq(1);  //获取当前的点击对象
			var my = $(this); 
			console.log("获取到对象");
			var news_id = my.attr("news_id");
			console.log("news_id"+news_id);
			$.ajax({
				type:'post',
		        url: '<%=()%>/Prise/update?news_id=' + news_id,
		        error: function (XMLHttpRequest, textStatus, errorThrown) {
		          console.log(XMLHttpRequest);
		          console.log(textStatus);
		          console.log(errorThrown);
		        },
		        success: function (data) {
		        	console.log(data);
		          if(data==1) {
		        	  $("#nd").html("<i class='thumbs up icon'></i>取消点赞");
		          }else{
		        	  $("#nd").html("<i class='thumbs outline up icon'></i>点赞");
		          } 	
		        }
			});
		}
		)

<a href="javascript:void(0);" id="nd"  class="ui label item" news_id=${news.news_id}><i class="thumbs up icon"></i>
${p eq 0?"点赞":"取消点赞"} 
</a>

然后成功了！
刚开始写项目，有什么不足之处还请大家指出~~~

秒客网

ssm下用ajax实现点赞功能，用onclick传值，以及onclick点击事件不触发的解决办法

相关文章