任务卡_06-JavaWEB_AJAX【实现简单的点赞功能】

最新推荐文章于 2022-09-13 18:26:33 发布

&再见萤火虫&

最新推荐文章于 2022-09-13 18:26:33 发布

阅读量949

点赞数

分类专栏： # 任务卡文章标签： AJAX jQuery 点赞功能 javaweb

本文链接：https://blog.csdn.net/qq_41528502/article/details/118851594

版权

任务卡专栏收录该内容

25 篇文章 8 订阅

订阅专栏

一，ajax 实现数据异步操作

1，任务概述

软件工程师小亮在编写微博点赞时，发现每次用户点击完成后，点赞量虽然增加了，但是会刷新整个页面，用户体验度很低，怎么样才能在功能实现的基础上，增强用户的体验度？分析后发现，ajax 是不二选择，那赶紧来学习一下吧。

2，任务过程

创建 servlet 用来处理前端请求和后台数据导入 jquery 包，使用 jquery 中的 ajax 或者 post get 方法理解任务需求，模拟点赞功能(可参考微博网页的效果)

3，编码过程

完整项目地址：https://gitee.com/goodbyefirefly/java-course/tree/master/Chapter7/AJAXTaskCard

整体设计思路：直奔主题——AJAX点赞。一个JSP页面上有三条评论，每个评论后面跟一个点赞按钮，通过AJAX实现每次点赞实时显示该评论获赞个数。

3.1 数据库设计

3.2 项目结构

3.3 核心代码

message.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="g" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ProductMessage</title>
</head>
<script type="text/javascript" src="./jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#comment1").click(function () {
            $.ajax({
                url:"/like",
                data:{"id":"comment1"},
                type:"post",
                dataType:"text",
                success:function (rs) {
                    $("#rs1").html(rs);
                }
            });
        });

        $("#comment2").click(function () {
            $.ajax({
                url:"/like",
                data:{"id":"comment2"},
                type:"post",
                dataType:"text",
                success:function (rs) {
                    $("#rs2").html(rs);
                }
            });
        });

        $("#comment3").click(function () {
            $.ajax({
                url:"/like",
                data:{"id":"comment3"},
                type:"post",
                dataType:"text",
                success:function (rs) {
                    $("#rs3").html(rs);
                }
            });
        });
    })


</script>
<body>
    <h1>评论区</h1>

    评论1点赞数：<span id="rs1"></span><button id="comment1">点赞</button><br>
    评论2点赞数：<span id="rs2"></span><button id="comment2">点赞</button><br>
    评论3点赞数：<span id="rs3"></span><button id="comment3">点赞</button><br>

</body>
</html>

likeServlet.java

package com.xrh.servlet;

import com.xrh.service.CommentService;
import com.xrh.service.impl.CommentServiceImpl;

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("/like")
public class likeServlet extends HttpServlet {
    CommentService commentService = new CommentServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String commentID = req.getParameter("id");
        System.out.println("commentID:" + commentID);
        int numOfLike = commentService.addLike(commentID);
        System.out.println("numOfLike:" + numOfLike);
        resp.setContentType("text/html;charset=utf-8");

        PrintWriter writer = resp.getWriter();
        writer.print(numOfLike);
    }
}

commentDaoImpl.java

package com.xrh.dao.impl;

import com.xrh.dao.CommentDao;
import com.xrh.util.DruidUtil;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;

public class CommentDaoImpl implements CommentDao {
    @Override
    public int addLike(String commentID) {
        String sql = "select num_of_like from commentajax where commentID=?";
        ArrayList<Object> params = new ArrayList<>(Arrays.asList(commentID));
        int numOfLike = 0;
        try {
            ResultSet rs = DruidUtil.query(sql, params);
            rs.next();
            numOfLike = (int)rs.getLong("num_of_like") + 1;

        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DruidUtil.close();
        }
        sql = "update commentajax set num_of_like=? where commentID=?";
        params = new ArrayList<>(Arrays.asList(numOfLike, commentID));
        try {
            DruidUtil.update(sql, params);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DruidUtil.close();
        }
        return numOfLike;
    }
}

DruidUtil.java

package com.xrh.util;

import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;

import java.sql.*;
import java.util.List;
import java.util.Properties;

public class DruidUtil {
    private static DruidDataSource ds;
    private static final ThreadLocal<MySession> localSessions = new ThreadLocal<>();

    static {
        ///实例化数据库连接池对象
        ds = new DruidDataSource();
        //实例化配置对象
        Properties properties = new Properties();
        try {
            //加载配置文件内容
            properties.load(DruidUtil.class.getClassLoader().getResourceAsStream("druid.properties"));
            ds = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void close() {
        MySession mySession = localSessions.get();
        if (mySession != null) {
            mySession.close();
        }
    }

    //获取连接对象
    private static Connection getConnection() {
        try {
            return ds.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
    //添加参数，得到结果集，关闭流

    public static ResultSet query(String sql, List<Object> params) throws SQLException {
        Connection con = getConnection();
        if (con == null) return null;
        PreparedStatement ps = con.prepareStatement(sql);
        if (params != null) {
            for (int i = 0; i < params.size(); i++) {
                ps.setObject(i + 1, params.get(i));
            }
        }
        ResultSet rs = ps.executeQuery();
        localSessions.set(new MySession(con, rs, ps));
        return rs;
    }

    public static int update(String sql, List<Object> params) throws SQLException {

        Connection con = getConnection();
        if (con == null) return -1;
        // 预编译语句防止SQL注入
        PreparedStatement ps = con.prepareStatement(sql);//此处不要自己创建preparedStatement
        if (params != null) {
            for (int i = 0; i < params.size(); i++) {
                ps.setObject(i + 1, params.get(i));
            }
        }
        int count = ps.executeUpdate();
        localSessions.set(new MySession(con, null, ps));
        return count;
    }


    private static class MySession {
        private final Connection connection;
        private final ResultSet resultSet;
        private final PreparedStatement preparedStatement;
        public MySession(Connection connection, ResultSet resultSet, PreparedStatement preparedStatement) {
            this.connection = connection;
            this.resultSet = resultSet;
            this.preparedStatement = preparedStatement;
        }

        public void close() {
            //关流时是否输出日志
            boolean log = false;
            try {
                if (resultSet != null) {
                    resultSet.close();
                    if (log) {
                        System.out.println(Thread.currentThread().getName() + "\tclose rs:" + resultSet);
                    }
                }
            } catch (SQLException ignore) {
            }
            try {
                if (preparedStatement != null) {
                    preparedStatement.close();
                    if (log) {
                        System.out.println(Thread.currentThread().getName() + "\tclose ps:" + preparedStatement);
                    }
                }
            } catch (SQLException ignore) {
            }
            try {
                if (connection != null) {
                    connection.close();
                    if (log) {
                        System.out.println(Thread.currentThread().getName() + "\tclose con:" + connection);
                    }
                }
            } catch (SQLException ignore) {
            }
        }
    }
}

3.4 运行效果

3.5 注意

1，数据库连接用完一定要记得关闭！！！(下面这种情况大概率是没有正常关闭连接)

com.alibaba.druid.pool.GetConnectionTimeoutException: wait millis 3001, active10, maxActive10

2，普通按钮显示文字，不是在value中赋值，而是在组件中间填写

<button id="comment1">点赞</button><br>

3，jQuery中没有onclick方法，而是click

$("#comment2").click(function () {}

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【06-JavaWEB】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

&再见萤火虫&

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
任务卡_06-JavaWEB_AJAX【实现简单的点赞功能】

一，ajax 实现数据异步操作1，任务概述软件工程师小亮在编写微博点赞时，发现每次用户点击完成后，点赞量虽然增加了，但是会刷新整个页面，用户体验度很低，怎么样才能在功能实现的基础上，增强用户的体验度？分析后发现，ajax 是不二选择，那赶紧来学习一下吧。2，任务过程创建 servlet 用来处理前端请求和后台数据导入 jquery 包，使用 jquery 中的 ajax 或者 post get 方法理解任务需求，模拟点赞功能(可参考微博网页的效果)...
复制链接

扫一扫