• Ajax模拟视频点赞功能

    前台

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: xx
    4.   Date: 2023/9/4
    5.   Time: 10:00
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10. <head>
    11.     <title>Titletitle>
    12.     <script src="js/jquery-3.7.0.js">script>
    13.     <script>
    14.         // 1.原始方式
    15.         /*function like(){
    16.            window.location.href = "likeServlet"
    17.         }*/
    18.  
    19.         // 2.原生JS实现异步
    20.         function like(){
    21.             //获取XmlHttpRequest对象
    22.             var xhr = new XMLHttpRequest();
    23.             //设置请求
    24.             xhr.open("get","likeServlet");
    25.             //发送请求
    26.             xhr.send();
    27.             xhr.onreadystatechange = function (){
    28.                 //获取状态码
    29.                 if ( xhr.readyState== 4){
    30.                     var msg = xhr.responseText;
    31.                     document.getElementById("num").innerText = msg;
    32.                 }
    33.             }
    34.         }
    35.  
    36.         // 3.第一次封装
    37.         /*$(function () {
    38.             //点击事件
    39.             $("#btn").click(function () {
    40.                 $.ajax({
    41.                     url:"likeServlet",
    42.                     data:null,
    43.                     type:"get",
    44.                     async:true,
    45.                     dataType:"text",
    46.                     success:function (msg) {
    47.                         $("#num").text(msg);
    48.                     }
    49.                 });
    50.             });
    51.         });*/
    52.  
    53.         // 4.第二次封装
    54.         /*$(function (){
    55.             $("#btn").click(function (){
    56.                 $.get("likeServlet",null,function (date) {
    57.                     $("#num").text(date)
    58.                 },"text");
    59.             });
    60.         })*/
    61.     script>
    62. head>
    63. <body>
    64. <video src="" controls>video>
    65. <input type="button" id="btn" onclick="like()" value="点赞">input>当前点赞量为：
    66. <span style="color: red" id = "num">
    67.     ${count}
    68. span>
    69. body>
    70. html>

    servlet

    1. import javax.servlet.ServletContext;
    2. import javax.servlet.ServletException;
    3. import javax.servlet.annotation.WebServlet;
    4. import javax.servlet.http.HttpServlet;
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpServletResponse;
    7. import java.io.IOException;
    8. import java.io.PrintWriter;
    9.  
    10. @WebServlet("/likeServlet")
    11. public class LikeServlet extends HttpServlet {
    12.     @Override
    13.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    14.         //将获取的点赞了存储到ServletContext
    15.         ServletContext servletContext = getServletContext();
    16.         //获取当前点赞量
    17.         Integer count =(Integer) servletContext.getAttribute("count");
    18.         //如果是第一个点赞
    19.         if (count == null){
    20.             count = 1;
    21.         } else {
    22.             count++;
    23.         }
    24.         servletContext.setAttribute("count",count);
    25.         /*原生js*/
    26.         /*resp.sendRedirect("video.jsp");*/
    27.         /*ajax*/
    28.         PrintWriter writer = resp.getWriter();
    29.         writer.print(count);
    30.         writer.close();
    31.     }
    32. }

  • 相关阅读:
    解决每次重启ganache虚拟环境，十个账号秘钥都会改变问题
    TypeScript 学习笔记（四）：装饰器与高级编程技巧
    面试素材-结构化
    SpringBoot原理篇(2)—自定义starter
    东芝Z750的画质真实吗？适合看纪录片吗？
    Spring In Action 5 学习笔记 chapter1
    Yolov5 batch 推理
    一起来学Kotlin：概念：17. Kotlin Extension Function / Method （扩展函数）
    我的创作纪念日
    路由套接字
  • 原文地址：https://blog.csdn.net/weixin_62971115/article/details/132675798