AJAX+JSON【练习】实现简易的点赞功能

  • 1.前言
  • 2.AJAX实现前后端数据传递
  • 3.JSON与Java对象之间的转换
  • 4.数据库相关配置
  • 5.jQuery的JS文件，lib中的Jar包
  • 6.代码
    • project目录
    • bean
    • dao
    • service
    • web
      • ClickThumbsupServlet
      • SelectServlet
    • JSP
  • 7.测试

1.前言

学习了AJAX之后，为了练练手，用AJAX和JSON实现了简易的点赞功能：数据库中的数据表存储着每篇微博的点赞数，用户点赞1次，对应点赞数就会+1，取消点赞，对应点赞数就会-1，用户不能重复点赞。

现在来总结一下，需要关注的有2个方面：1.AJAX怎么实现的前后端数据传递？2. JSON与Java对象之间的转换

仍采用MVC设计模式，关于MVC，可参考之前写的博客：
MVC设计模式+Servlet+Filter【练习】搭建 MVC 架构，实现数据的增删改查

2.AJAX实现前后端数据传递

AJAX有2种实现方式：
1.用JavaScript实现
2.用jQuery实现
后者比前者简洁方便多了！

jQuery实现AJAX有3种方法：
1.ajax()方法
2.get()方法
3.post()方法
我们选用3种方法之一就可以了。

注意：
ajax()方法是 jQuery 底层 AJAX 实现，更加灵活，有很多可选参数（以键值对的形式）。我们使用get()方法、post()方法时，jQuery会调用底层的ajax()方法。

在这个例子中，使用的是ajax()方法，现针对该例子，讲解前后端如何实现数据传递：

ajax()方法的参数data，前端往后端传数据：
参数data，就是前端往后端传的数据。

可以传入3种类型的数据：

  • 文本：“uname=alice&mobileIpt=110&birthday=1983-05-12”
  • json对象：{uanme:‘vic’,mobileIpt:‘110’,birthday:‘2013-11-11’}
  • json数组：
    [
    {“name”:“uname”,“value”:“alice”},
    {“name”:“mobileIpt”,“value”:“110”},
    {“name”:“birthday”,“value”:“2012-11-11”}
    ]

详见这篇文章：JQuery.Ajax()的data参数类型

ajax()方法的参数success，后端往前端传数据：
后端：从数据库中查询得到的数据，封装在实体类（bean）的对象中，从dao传到service再传到sevlet，在servlet中，将对象转换为JSON格式，通过PrintWriter将JSON发给前端。

        //3.将对象返回给客户端，需要转换成json格式JSONObject jo = JSONObject.fromObject(ar);resp.setContentType("text/html;charset=utf-8");PrintWriter out = resp.getWriter();out.print(jo);

前端：ajax()方法的参数success是一个回调函数，在回调函数的参数接收JSON数据。
所谓回调函数：就是请求在后台处理完，再返回到前台后，才调用的函数。

        $.ajax({url:"/toClickThumbsup",data:{"ifCancelThumbsup":ifCancelThumbsup,"articleID":articleID.toString()},//存入request域，servlet通过req.getParameter获取type:"post",dataType:"JSON",success:function (result) {//服务器传来的result是JSON数据，该数据由Article对象转换而来$(".thumbsupNum").text(result.thumbsupNum);}})

3.JSON与Java对象之间的转换

需要使用到第三方Jar包，第三方Jar包不同，语法就不同。
有如下第三方包可供选择：

  • 阿里Jar包：FastJson
  • 谷歌Jar包：Gson
  • json-lib （本例子所选用的方式）
  • Jackson

FastJson和Gson的使用方法，可见之前写的文章：
Java【教程】数据格式：XML与JSON

也可参考这篇文章，介绍了4种包：
四种JSON解析工具–（json-lib&Jackson&Gson&FastJson）

4.数据库相关配置

为了能够正常使用JDBC操作数据，以及使用Druid连接池，需要做以下工作：
1.创建lib文件夹，在idea里配置其为project library（过程略）
2.在lib里放有关数据库的jar包（Druid的jar包，JDBC的jar包）
3. src文件夹里放druid.properties文件，别放错地方了，里边的配置要改一下（数据库的名字）
4. 创建util包，util里放DruidUtil.java文件，这是一个工具类，方便使用连接池
5. dao的impl实现类要继承DruidUtil类

5.jQuery的JS文件，lib中的Jar包

注意：jQuery的JS文件不是Jar包，不放在lib文件夹里，单独放在js文件夹里。

引入的Jar包较多，下图标注了各Jar包的作用:

6.代码

project目录

bean

package com.czn.bean;public class Article {private int articleID;private int thumbsupNum = 0;public Article() {}public Article(int articleID, int thumbsupNum) {this.articleID = articleID;this.thumbsupNum = thumbsupNum;}public int getArticleID() {return articleID;}public void setArticleID(int articleID) {this.articleID = articleID;}public int getThumbsupNum() {return thumbsupNum;}public void setThumbsupNum(int thumbsupNum) {this.thumbsupNum = thumbsupNum;}
}

dao

接口和实现类

package com.czn.dao;import com.czn.bean.Article;import java.util.List;public interface ArticleDao {//查public Article selectOne(Article ar);//改public Article updateThumbsup(Article ar,String ifCancelThumbsup);
}
package com.czn.dao.impl;import com.czn.bean.Article;
import com.czn.dao.ArticleDao;
import com.czn.util.DruidUtil;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;public class ArticleDaoImpl implements ArticleDao {@Overridepublic Article selectOne(Article ar) {int articleID = ar.getArticleID();Connection conn = null;PreparedStatement state = null;ResultSet rs = null;try{conn = DruidUtil.getConnection();//DruidUtil里的方法String sql = "select * from article where articleID = ?";state = conn.prepareStatement(sql);state.setInt(1,articleID);rs = state.executeQuery();while(rs.next()){//在数据库中获取该文章的点赞数，并修改文章对象的点赞数属性ar.setThumbsupNum(rs.getInt("thumbsupNum"));}}catch (SQLException e){System.out.println("从数据库中取数据时出错。");e.printStackTrace();}finally {//关闭资源DruidUtil.close(conn,state,rs);//DruidUtil里的方法}return ar;}@Overridepublic Article updateThumbsup(Article ar,String ifCancelThumbsup) {Connection conn = null;PreparedStatement state = null;int rowNumAffected = 0;//先查找该文章，获取其原来的点赞数Article oldAr = selectOne(ar);int previousNum = oldAr.getThumbsupNum();try{conn = DruidUtil.getConnection();//DruidUtil里的方法String sql = "update article set thumbsupNum=? where articleID = ?";state = conn.prepareStatement(sql);if(ifCancelThumbsup.equals("false")){state.setInt(1,previousNum+1);}else if(ifCancelThumbsup.equals("true")){state.setInt(1,previousNum-1);}state.setInt(2,oldAr.getArticleID());rowNumAffected = state.executeUpdate();System.out.println("更新数据库的数据时，影响表的行数："+rowNumAffected);if(rowNumAffected <= 0){throw new SQLException();}}catch (SQLException e){System.out.println("在数据库中更新数据时出错。");e.printStackTrace();}finally {//关闭资源DruidUtil.close(conn,state,null);}//再次查找该文章，点赞数已经改变了Article newAr = selectOne(ar);return newAr;}
}

service

接口和实现类

package com.czn.service;import com.czn.bean.Article;public interface ArticleService {//查public Article selectOne(Article ar);//改public Article updateThumbsup(Article ar,String ifCancelThumbsup);
}

package com.czn.service.impl;import com.czn.bean.Article;
import com.czn.dao.ArticleDao;
import com.czn.dao.impl.ArticleDaoImpl;
import com.czn.service.ArticleService;public class ArticleServiceImpl implements ArticleService {private ArticleDao dao = new ArticleDaoImpl();@Overridepublic Article selectOne(Article ar) {return dao.selectOne(ar);}@Overridepublic Article updateThumbsup(Article ar,String ifCancelThumbsup) {return dao.updateThumbsup(ar,ifCancelThumbsup);}
}

web

ClickThumbsupServlet

package com.czn.web;import com.czn.bean.Article;
import com.czn.service.ArticleService;
import com.czn.service.impl.ArticleServiceImpl;
import net.sf.json.JSONObject;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet(value = "/toClickThumbsup")
public class ClickThumbsupServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接受参数（是点赞，还是取消点赞）String ifCancelThumbsup = req.getParameter("ifCancelThumbsup");String str = req.getParameter("articleID");int articleID = Integer.parseInt(str);Article initAr = new Article();initAr.setArticleID(articleID);//2.调取service方法ArticleService service = new ArticleServiceImpl();Article ar = service.updateThumbsup(initAr,ifCancelThumbsup);//3.将对象返回给客户端，需要转换成json格式JSONObject jo = JSONObject.fromObject(ar);resp.setContentType("text/html;charset=utf-8");PrintWriter out = resp.getWriter();out.print(jo);}
}

SelectServlet

package com.czn.web;import com.czn.bean.Article;
import com.czn.service.ArticleService;
import com.czn.service.impl.ArticleServiceImpl;
import net.sf.json.JSONObject;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet(value = "/toSelect")
public class SelectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接受参数String str = req.getParameter("articleID");int articleID = Integer.parseInt(str);//initAr的点赞数初始化为0Article initAr = new Article();initAr.setArticleID(articleID);//2.调取service方法ArticleService service = new ArticleServiceImpl();Article ar = service.selectOne(initAr);//3.将对象返回给客户端，需要转换成json格式JSONObject jo = JSONObject.fromObject(ar);resp.setContentType("text/html;charset=utf-8");PrintWriter out = resp.getWriter();out.print(jo);}
}

JSP

<%@ page import="com.czn.bean.Article" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Microblog</title><style>.article{border: 1px solid coral;height: 250px;width: 500px;}.thumbsup{color: darkgray;cursor: pointer;}.thumbsupNum{color:lightsalmon;}</style>
</head>
<body><div class="article" id="1"><h5>summernight98</h5><p>候馆梅残，溪桥柳细。草薰风暖摇征辔。离愁渐远渐无穷，迢迢不断如春水。寸寸柔肠，盈盈粉泪。楼高莫近危阑倚。平芜尽处是春山，行人更在春山外。</p><h6>2020.10.16</h6><span class="thumbsup" active="false">赞</span><!--active是自定义属性--><span class="thumbsupNum"></span></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">//从数据库获取该条微博的点赞数，显示出来var articleID = $(".article").attr("id");console.log("id:",articleID);//注意：接收JSON数据，必须用ajax方法，不能用get/post（默认接收文本数据）$.ajax({url:"/toSelect",data:{"articleID":articleID.toString()},//存入request域，servlet通过req.getParameter获取type:"post",dataType:"JSON",success:function (result) {//服务器传来的result是JSON数据，该数据由Article对象转换而来$(".thumbsupNum").text(result.thumbsupNum);}})//如果用户点击”赞“var ifCancelThumbsup;$(".thumbsup").click(function () {if($(".thumbsup").attr("active")=="false"){//改颜色$(".thumbsup").css("color","coral");//点赞次数+1//var num = $(".thumbsupNum").text();//$(".thumbsupNum").text(Number(num)+1);//改变active属性的值$(".thumbsup").attr("active","true")ifCancelThumbsup = "false";}else if($(".thumbsup").attr("active")=="true"){//改颜色$(".thumbsup").css("color","darkgray");//点赞次数+1//var num = $(".thumbsupNum").text();//$(".thumbsupNum").text(Number(num)-1);//改变active属性的值$(".thumbsup").attr("active","false")ifCancelThumbsup = "true";}//改变数据库中的数据$.ajax({url:"/toClickThumbsup",data:{"ifCancelThumbsup":ifCancelThumbsup,"articleID":articleID.toString()},//存入request域，servlet通过req.getParameter获取type:"post",dataType:"JSON",success:function (result) {//服务器传来的result是JSON数据，该数据由Article对象转换而来$(".thumbsupNum").text(result.thumbsupNum);}})})</script>
</html>

7.测试

AJAX+JSON【练习】实现简易的点赞功能相关推荐

  1. zan php demo,ajax+php+mysql实现无刷新点赞功能

    从动态图看出来,点击赞的按钮的时候,旁边的赞数量在无刷新地增加.打开数据库也能看到赞数量更新了. 原理就是通过ajax异步提交数据给数据库. 首先前端页面就是一个按钮和赞数量. 数据库名,test,表 ...

  2. java ajax无刷分页_asp.net+ajax+json来实现无刷新分页功能

    现在做网站就是尽可能的提高用户体验,用户浏览网站尽可能不要刷新,响应速度尽可能的快,就是加载速度不好,也要告诉用户你已经很努力的在加载了(loading.....),下面来看看如何实现此功能 USE ...

  3. ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例

    html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...

  4. ashx 后台 解析json_Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  5. php ajax 点赞实例下载,php+mysql结合Ajax实现点赞功能完整实例

    时间:2015-03-03来源:www.aspku.com 作者:源码库 文章热度: ℃ 这篇文章主要介绍了php+mysql结合Ajax实现点赞功能,以一个完整实例形式详细分析了实现点赞功能中涉及的 ...

  6. ajax mysql点赞_php+mysql结合Ajax实现点赞功能完整实例

    php+mysql结合Ajax实现点赞功能完整实例 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 // ...

  7. js和ajax点赞功能代码_Redis实现点赞功能模块，你了解多少？

    引言 功能点设计 比如我喜欢发文章的掘金网站就有点赞的功能,统计文章点赞的总数,用户所有文章的点赞数,因此设计的点赞功能模块具有以下功能点: 某篇文章的点赞数 用户所有文章的点赞数 用户点赞的文章 持 ...

  8. ajax实现微博点赞功能

    1.思路概述 需要的工具类 创建JSP页面,实现鼠标移入变红色,移出变黑色 在bean包下创建用户实体类,用1代表用户已经点赞,0代表用户未点赞 在dao包下实现从数据库中查询所有点赞用户总数.根据用 ...

  9. html5点赞计数功能,点赞功能

    今天琢磨着搞了个点赞功能,因为考虑到个人网站没有根基,所以如果必须要登录才可以点赞的话那绝大部分人肯定转头就走. 如果不登录就可以点赞的话,就要动脑筋去防止刷赞了,我也去看过一些别的网站搞的投票功能, ...

最新文章

  1. 不要网上乱拷贝代码了！一段网上找的代码突然炸了！
  2. DataFrame(8)：DataFrame运算——逻辑运算(用于筛选数据) 含有~
  3. 从技术角度探讨：深度传感器行业有哪些发展机会
  4. 联想服务器 重装系统u盘启动,联想_Lenovo BIOS Setup Utility 设置U盘启动教程
  5. valgrind 看内存泄漏
  6. ERP系统成功选型的三个技巧
  7. ibm量子计算机科学家,重磅！IBM发布全球首个独立商用量子计算机
  8. 一些比较恶心的代码片段
  9. python雷达图怎么做_使用Python绘制雷达图
  10. Vim用原生雅黑Consolas混合字体
  11. 2018-2019-1 20189221 《构建之法》第 3 周学习总结
  12. 静态页面对seo优化之详解
  13. Matlab之数据归一化函数——mapminmax()
  14. AirServer投屏轻松地将iPhone、iPad投屏到Mac上面教程
  15. RMQ 区间最值问题
  16. 19. 大吉大利，晚上吃鸡
  17. python统计套利_配对交易-低风险统计套利量化交易 Python 实战
  18. win无线网卡怎么进入监听模式_网卡灯正常，但却不能连入网络该如何解决？
  19. Python自学指南-你好啊！Python
  20. 计算机网络课程实验4——编程实现路由算法（迪杰斯特拉算法）

热门文章

  1. java中常见的限流算法详细解析
  2. 联合证券这么看新钢钒
  3. exe打开方式被木马或病毒修改，无法打开任何可执行文件的解决办法
  4. 2022-2028年全球管理交换机行业供需分析及发展前景研究报告
  5. NXP官方SDK、固件库、帮助文档下载
  6. 腾讯设计师解读金字塔思维方式
  7. Microsoft To Do无法打开
  8. Decorator（装饰器） 模式
  9. android圆形头像边框,Android Studio实现带边框的圆形头像
  10. JavaWeb之web服务器软件