Ajax模拟视频点赞功能

这篇具有很好参考价值的文章主要介绍了Ajax模拟视频点赞功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前台

<%--
  Created by IntelliJ IDEA.
  User: xx
  Date: 2023/9/4
  Time: 10:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.7.0.js"></script>
    <script>
        // 1.原始方式
        /*function like(){
           window.location.href = "likeServlet"
        }*/

        // 2.原生JS实现异步
        function like(){
            //获取XmlHttpRequest对象
            var xhr = new XMLHttpRequest();
            //设置请求
            xhr.open("get","likeServlet");
            //发送请求
            xhr.send();
            xhr.onreadystatechange = function (){
                //获取状态码
                if ( xhr.readyState== 4){
                    var msg = xhr.responseText;
                    document.getElementById("num").innerText = msg;
                }
            }
        }

        // 3.第一次封装
        /*$(function () {
            //点击事件
            $("#btn").click(function () {
                $.ajax({
                    url:"likeServlet",
                    data:null,
                    type:"get",
                    async:true,
                    dataType:"text",
                    success:function (msg) {
                        $("#num").text(msg);
                    }
                });
            });
        });*/

        // 4.第二次封装
        /*$(function (){
            $("#btn").click(function (){
                $.get("likeServlet",null,function (date) {
                    $("#num").text(date)
                },"text");
            });
        })*/
    </script>
</head>
<body>
<video src="" controls></video>
<input type="button" id="btn" onclick="like()" value="点赞"></input>当前点赞量为:
<span style="color: red" id = "num">
    ${count}
</span>
</body>
</html>

servlet文章来源地址https://www.toymoban.com/news/detail-699967.html

import javax.servlet.ServletContext;
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("/likeServlet")
public class LikeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //将获取的点赞了存储到ServletContext
        ServletContext servletContext = getServletContext();
        //获取当前点赞量
        Integer count =(Integer) servletContext.getAttribute("count");
        //如果是第一个点赞
        if (count == null){
            count = 1;
        } else {
            count++;
        }
        servletContext.setAttribute("count",count);
        /*原生js*/
        /*resp.sendRedirect("video.jsp");*/
        /*ajax*/
        PrintWriter writer = resp.getWriter();
        writer.print(count);
        writer.close();
    }
}

到了这里,关于Ajax模拟视频点赞功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(51)
  • 前端基础(三十六):读取本地音视频设备并进行播放

    请求媒体输入和输出设备的列表,例如麦克风,摄像机,耳机设备等 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等

    2024年02月15日
    浏览(50)
  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(五)—— 项目-新闻头条-数据管理平台-ajax综合案例前端

    愿许秋风知我意,解我心中意难平。 推荐使用, 每个程序员都有自己的管理方式。 HTML结构: 1.为什么要提取公共前缀地址(基地址),因为公司业务可能会更换服务器,如果你不想一条一条地修改请求地址的话。 后续使用axios时,url不需要再写前缀。 2.请求成功与失败 成

    2024年01月25日
    浏览(49)
  • Ajax面试题 | 前端

    本文的Ajax面试题主要来源于网上的文章和课程,会有出处注明。 本文主要作为自用备忘。 Ajax知识点笔记 Ajax是异步的javascript和xml Ajax是一种用于创建快速动态网页的技术 作用 :ajax用来与后台交互 优点 : 最大的优点就是页面无需刷新,在页面内与服务器通信,非常好的用

    2023年04月08日
    浏览(43)
  • ajax实现下载文件功能

    最近在做下载功能,因为后端需要生成PDF并上传到云服务器,只返回文件的URL,所以百度了很多找到了一个简单的方法. Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 Ja

    2024年02月15日
    浏览(32)
  • Ajax_3 Ajax原理+ (XMLHttpRequest + Promise )+ 封装一个axios插件库,实现功能。

    01-Ajax原理-XMLHttpRequest 使用XMLHttpRequest 步骤: 创建XMLHttpRequest对象 配置请求方法请求url网址 监听loadend事件,接受响应结果 发起请求 需求:使用XMLHttpRequest对象与服务器通信 代码示例 02-XMLHttpRequest-查询参数 定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的

    2024年02月14日
    浏览(43)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(65)
  • 前端学习——ajax (Day3)

    使用 XMLHttpRequest XMLHttpRequest - 查询参数 XMLHttpRequest - 数据提交 Promise - 三种状态

    2024年02月16日
    浏览(43)
  • 前端学习——ajax (Day1)

    axios 使用 练习 练习 案例 axios 错误处理 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8 url好像失效了

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包