ajax实现微博点赞功能

最新推荐文章于 2024-07-26 12:28:02 发布

liitle--star

最新推荐文章于 2024-07-26 12:28:02 发布

阅读量747

点赞数 1

文章标签： java servlet jsp ajax html

本文链接：https://blog.csdn.net/weixin_49357570/article/details/112576203

版权

1.思路概述

需要的工具类
创建JSP页面，实现鼠标移入变红色，移出变黑色
在bean包下创建用户实体类，用1代表用户已经点赞，0代表用户未点赞
在dao包下实现从数据库中查询所有点赞用户总数、根据用户名修改点赞状态、用户不存在时插入用户信息以及获取当前用户名点赞状态功能
在util包中创建Druid连接池的连接方法和关闭方法
在service包中实现Servlet调取service,service调取dao
在web包下接受用户名和密码参数、调取service方法最终实现跳转页面

2.具体代码

JSP页面

<%@ page import="com.yhp.service.impl.UserServiceImpl" %><%--
  Created by IntelliJ IDEA.
  User: SX
  Date: 2021/1/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>微博点赞</title>
    <!-- CSS样式，取消超链接下划线 -->
    <style type="text/css">
      div {
   text-decoration: none;color: #000000
      }
    </style>
  </head>
  <body>
    <%UserServiceImpl dao = new UserServiceImpl();
    request.setAttribute("sum",dao.sum());%>
    <h1>输入用户名和密码实现点赞功能</h1><br>
    用户名<input type="text" name="userName" id="uname"><br>
    密码<input type="password" name="userPassword" id="upass"><br>
    <div title="赞" href="/praise" >
      <img src="images/black.png" width="20px" id="image">
      <span id="number" >${sum}</span>
    </div>
  </body>

  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    //鼠标移入变色
    $(function (){
   
      $("div").mouseover(function (){
   
        $("#image").attr("src","images/red.png");
        $("#number").css("color","red",);
      })
    })
    //鼠标移出变回原色
    $(function (){
   
      $("div").mouseout(function (){
   
        $("#image").attr("src","images/black.png");
        $("#number").css("color","black");
      })
    })
    //点击图标实现点赞功能
    $(function<

最低0.47元/天解锁文章

liitle--star

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
ajax实现微博点赞功能

1.思路概述需要的工具类创建JSP页面，实现鼠标移入变红色，移出变黑色在bean包下创建用户实体类，用1代表用户已经点赞，0代表用户未点赞在dao包下实现从数据库中查询所有点赞用户总数、根据用户名修改点赞状态、用户不存在时插入用户信息以及获取当前用户名点赞状态功能在util包中创建Druid连接池的连接方法和关闭方法在service包中实现Servlet调取service,service调取dao在web包下接受用户名和密码参数、调取service方法最终实现跳转页面2.具体代码JS
复制链接

扫一扫