Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue &amp；同步请求到异步请求_jsp异步请求(3)

本文链接：https://blog.youkuaiyun.com/2401_84433807/article/details/138927050

❤️ 谢谢支持

喜欢的话别忘了关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

ajax请求的步骤如下：

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

2. axios语法及其与 java后端交互

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，可以实现异步请求。请求的方式有get和post两种方式，示例代码如下：

在这里插入图片描述

（1）get请求

要点：?参数=值，记得加上下文；

        axios.get("/day06/video/comment/ajax?content="+content.value)
            .then(response=>{
                let resp = response.data;
                console.log(resp)
            },error=>{
                console.log("error:"+error)
            })

（2）post请求

要点：参数，

        let params = new URLSearchParams();
        params.append("content",content.value)
        axios.post("/day06/video/comment/ajax",params)
            .then(response=>{
                let resp = response.data;
                console.log(resp);
            },error=>{
                console.log(error)
            })

此时，java后端返回一个json对象

resp.getWriter().write(JSON.toJSONString(
                new ResData(200, "ok", commentList)));

3.用js的axios实现边看视频边评论

前端代码：

（1）启动就得有数据的问题：先看本地存储中有没有评论，没有，则查一下数据库，servlet响应后保存在local Storage 里面；

（2）每次添加一条评论，把评论存到数据库中，并且刷新一下页面的显示；

（3）页面卸载之前，清空本地存储中的数据；

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/day06/js/axios.min.js"></script>
</head>
<body>

<video src="/day06/video/DDE.mp4" controls width="500px" height="350px"></video>
<hr>
<br>
<textarea id="content" cols="20" rows="5"></textarea><br>
<button id="btn">评论</button>
<br>
用li拼出来：所有评论
<ul id="ul">
</ul>


<script>
    let btn = document.getElementById("btn");

    // 在启动之前就需要查一次数据库
    // 从本地存储中获取数据
    var data = localStorage.getItem('data');
    if (data) {
        // 如果本地存储中有数据，则直接使用
        updateUl(JSON.parse(data));
    }else {
        // 如果本地存储中没有数据，则发送 Axios 请求获取数据
        axios.get('/day06/video/comment/ajax/db')
            .then(function(response) {
                // 获取到数据后，更新页面并保存到本地存储中
                updateUl(response.data);
                localStorage.setItem('data', JSON.stringify(response.data));
            })
            .catch(function(error) {
                console.error(error);
            });
    }


    // 每次新增评论时，刷新一下
    btn.onclick = function () {
        let content = document.getElementById("content");
        let msg = document.querySelector("#msg");
        console.log(content)
        axios.get("/day06/video/comment/ajax/db?content="+content.value)
            .then(response=>{
            console.log(response);
            // 调用更新事件
            updateUl(response.data);

        })
        content.value=""; // 清空一下
    }

    // 定义一个刷新ul中数据的函数
    function updateUl(data){
        // 在li里拼出来；
        let commentList = data;
        let liStr = "";
        let ul = document.getElementById("ul");
        for (const co of commentList) {
            liStr+="<li>"+co.createTime+": "+co.content +"</li>"
        }
        ul.innerHTML = liStr;
    }

    // 在页面卸载之前，清空本地存储中的数据
    window.addEventListener('beforeunload', function() {
        localStorage.removeItem('data');
    });

</script>

</body>
</html>

后端代码：

package com.tianju.servlet;

import com.alibaba.fastjson.JSON;
import com.tianju.entity.Comment;
import com.tianju.service.ICommentService;
import com.tianju.service.impl.CommentServiceImpl;
import com.tianju.util.StringUtils;

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.util.ArrayList;
import java.util.Date;
import java.util.List;

@WebServlet("/video/comment/ajax/db")
public class CommentVideoAjaxServletToDB extends HttpServlet {
    private ICommentService commentService = new CommentServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取前端的评论
        String comment = req.getParameter("content");
        if (!StringUtils.isBlank(comment)){
            // 这里把数据存到数据库
            commentService.add(new Comment(new Date(),comment));
        }
        // 再查一下数据库
        // ajax只能用response
        List<Comment> commentList = commentService.queryAll();
        String listJson = JSON.toJSONString(commentList);
        System.out.println(listJson);
        resp.getWriter().write(listJson);
    }
}

4.上面代码存在问题 & vue是啥？

在上面代码中，页面显示的内容是把html代码拼出来，然后进行显示的，这样就把逻辑处理和前端展示两件事情耦合起来；因此就用vue：

前端基础（JavaScript）——基础语法（变量，分支…）& Json对象【重要】& 函数定义 & 事件

// 定义一个刷新ul中数据的函数
    function updateUl(data){
        // 在li里拼出来；
        let commentList = data;
        let liStr = "";
        let ul = document.getElementById("ul");
        for (const co of commentList) {
            liStr+="<li>"+co.createTime+": "+co.content +"</li>"
        }
        ul.innerHTML = liStr;
    }

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue &amp； 同步请求 到 异步请求_jsp异步请求(3)

❤️ 谢谢支持

2. axios语法 及其与 java后端交互

（1）get请求

（2）post请求

3.用js的axios实现边看视频边评论

4.上面代码存在问题 & vue是啥？

文末

Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue &amp；同步请求到异步请求_jsp异步请求(3)

2. axios语法及其与 java后端交互