Day_10 AJAX axios

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量1k 收藏
点赞数
分类专栏： JavaWeb 文章标签： 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbw18/article/details/123648819
版权

文章目录

01-AJAX概述(掌握)

  • 概述
    • AJAX即“Asynchronous Javascript And XML” ：异步的JavaScript和XML。
  • 作用
    • ①可以发起异步请求
    • ②可以局部刷新页面
      • 可以局部更新页面内容
  • ①可以发起异步请求
    • image-20220319090751421

02-XMLHttpRequest对象详细介绍(了解)

  • 常用属性
    • onreadystatechange
      • 用于设置监听异步对象的状态改变
    • status
      • 用于获取服务器响应状态码(200、404、500…)
    • readyState : 用于获取异步对象状态
      • 0 : 异步对象未初始化
      • 1 : 异步对象开始发送请求
      • 2 : 异步对象发送请求完成
      • 3 : 异步对象开始读取响应
      • 4 : 异步对象读取响应完成
    • responseText ：用于获取响应正文
  • 常用方法
    • open(请求方式,url,flag)
      • 请求方式：get/post
      • url : 请求路径
      • flag : true=异步请求，false=同步请求
    • send() : 发送数据
      • 请求方式=get，请求参数在url后面
      • 请求方式=post，请求参数在send方法中
    • setRequestHeader() : 设置请求头

03-AJAX入门案例(了解)

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-AJAX入门案例</title>
</head>
<body>

<button onclick="fn1()">AJAX</button>


</body>
<script>

    function fn1() {
        //①创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //②监听XMLHttpRequest对象状态改变
        xhr.onreadystatechange = function () {

            if (xhr.status == 200 && xhr.readyState == 4) {
                //异步请求成功
                var responseText = xhr.responseText;
                console.log(responseText);
            }

        }
        //③打开连接
        xhr.open("get","/day12/demo01?username=root&password=root",true);
        //④发送参数
        xhr.send();
    }


</script>
</html>

    /**
 * 03-AJAX入门案例
 */
@WebServlet("/demo01")
public class Demo01Servlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username = " + username);
        String password = req.getParameter("password");
        System.out.println("password = " + password);

        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write("你好世界");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

04-axios概述(掌握)

05-axios发送普通参数(掌握)

  • 概述

    • 请求参数在url后面，以键值对的形式。

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-axios发送普通参数</title>
</head>
<body>
<button onclick="fn1()">axios发送普通参数</button>

</body>

<script src="/day12/js/axios.js"></script>
<script>

    function fn1() {
        axios({
            url: "/day12/demo02",
            method: "get",
            params: {
                username: "root",
                password: "root"
            },
            responseType: 'json',
        }).then(function (res) {
            console.log(res);
            //json字符串 -> js对象
            var jsObj = res.data;
            console.log(jsObj.msg);
        })

    }

</script>
</html>

    @WebServlet("/demo02")
public class Demo02Servlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username = " + username);
        String password = req.getParameter("password");
        System.out.println("password = " + password);

        resp.setContentType("application/json;charset=utf-8");
        ResultVO resultVO = new ResultVO(true,"操作成功!",null);
        String jsonStr = JsonUtils.javaBean2JsonStr(resultVO);
        resp.getWriter().write(jsonStr);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

06-axios发送请求体json(掌握)

  • 概述

    • 发送请求正文，数据类型是json。

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-axios发送请求体json</title>
</head>
<body>
<button onclick="fn1()">axios发送请求体json</button>

</body>

<script src="/day12/js/axios.js"></script>
<script>

    function fn1() {
        axios({
            url: "/day12/demo03",
            method: "post",
            data: {
                username: "root",
                password: "root"
            },
            responseType: 'json',
        }).then(function (res) {
            console.log(res);
            //json字符串 -> js对象
            var jsObj = res.data;
            console.log(jsObj.msg);
        })

    }

</script>
</html>

    /**
 * 06-axios发送请求体json
 */
@WebServlet("/demo03")
public class Demo03Servlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //①获取请求正文中的json字符串
        BufferedReader bufferedReader = req.getReader();
        String content = null;
        StringBuilder sb = new StringBuilder();
        while ((content = bufferedReader.readLine()) != null) {
            sb.append(content);
        }
        String inputJsonStr = sb.toString();
        System.out.println("inputJsonStr = " + inputJsonStr);
        //②将json字符串转换为javabean对象
        Map map = JsonUtils.jsonStr2JavaBean(inputJsonStr, Map.class);
        String username = (String) map.get("username");
        System.out.println("username = " + username);
        String password = (String) map.get("password");
        System.out.println("password = " + password);

        //①将javabean对象转换为json字符串
        resp.setContentType("application/json;charset=utf-8");
        ResultVO resultVO = new ResultVO(true, "操作成功!", null);
        String jsonStr = JsonUtils.javaBean2JsonStr(resultVO);
        //②将json字符串作为响应正文返回给浏览器
        resp.getWriter().write(jsonStr);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

07-JsonUtils工具类优化(掌握)

  • JsonUtils

    • ①将json字符串转换为javabean对象
    • ②将javabean对象转换为json字符串
    • ③获取请求正文中的json字符串，将json字符串转换为javabean对象
    • ④将javabean对象转换为json字符串,将json字符串作为响应正文

  • 代码实现

    public class JsonUtils {

    /**
     * 将javabean对象转换为json字符串
     *
     * @param obj
     * @param <T>
     * @return
     */
    public static <T> String javaBean2JsonStr(T obj) {
        try {
            return new ObjectMapper().writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将json字符串转换为javabean对象
     *
     * @param jsonStr
     * @param clazz
     * @param <T>
     * @return
     */
    public static <T> T jsonStr2JavaBean(String jsonStr, Class<T> clazz) {
        try {
            return new ObjectMapper().readValue(jsonStr, clazz);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }


    /**
     * 获取请求正文中的json字符串，将json字符串转换为javabean对象
     * @param request
     * @param clazz
     * @param <T>
     * @return
     */
    public static <T> T request2JavaBean(HttpServletRequest request, Class<T> clazz) {

        try {
            //①获取请求正文中的json字符串
            BufferedReader bufferedReader = request.getReader();
            String content = null;
            StringBuilder sb = new StringBuilder();
            while ((content = bufferedReader.readLine()) != null) {
                sb.append(content);
            }
            String inputJsonStr = sb.toString();
            System.out.println("inputJsonStr = " + inputJsonStr);
            //②将json字符串转换为javabean对象
            T t = JsonUtils.jsonStr2JavaBean(inputJsonStr, clazz);
            return t;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将javabean对象转换为json字符串,将json字符串作为响应正文
     * @param t
     * @param response
     * @param <T>
     */
    public static<T> void javaBean2ResponseText(HttpServletResponse response ,T t ){
        try {
            response.setContentType("application/json;charset=utf-8");
            //①将javabean对象转换为json字符串
            String jsonStr = JsonUtils.javaBean2JsonStr(t);
            //②将json字符串作为响应正文
            response.getWriter().write(jsonStr);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


}

    @WebServlet("/demo04")
public class Demo04Servlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Map map = JsonUtils.request2JavaBean(req, Map.class);
        String username = (String) map.get("username");
        System.out.println("username = " + username);
        String password = (String) map.get("password");
        System.out.println("password = " + password);

        ResultVO resultVO = new ResultVO(true, "操作成功!", null);
        JsonUtils.javaBean2ResponseText(resp, resultVO);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

08-axios练习(掌握)

  • 需求

    • image-20220319111412120

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-axios练习</title>
</head>
<body>
<div id="app">


    员工编号:<input type="text" v-model="userId"><br>
    <button @click="selectUser()">查询</button>
    <br>

    结果如下:<br>
    <div v-if="isDisplay">
        编号:<span v-text="user.userId"></span><br>
        姓名:<span v-text="user.userName"></span><br>
        年龄:<span v-text="user.age"></span><br>
    </div>
    <div v-if="!isDisplay">
        没有找到!
    </div>


</div>


</body>

<script src="/day12/js/axios.js"></script>
<script src="/day12/js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            userId: 1,
            isDisplay:true,
            user: {
                userId: 1,
                userName: "",
                age: 0
            }
        },
        methods: {

            selectUser() {
                console.log("selectUser");
                var _this = this;
                axios({
                    url: "/day12/demo05",
                    method: "get",
                    params: {
                        userId: this.userId
                    }
                }).then(function (res) {
                    console.log(res);
                    var jsObj = res.data;
                    if (jsObj.flag) {
                        _this.isDisplay = true;
                        _this.user = jsObj.data;
                    } else {
                        _this.isDisplay = false;

                    }
                })

            }

        }
    })


</script>
</html>

    @WebServlet("/demo05")
public class Demo05Servlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userId = req.getParameter("userId");
        User user = null;
        if (userId.equals("1")) {
            //小邱
            user = new User(1, "小邱", 18);
        } else if (userId.equals("2")) {
            //中邱
            user = new User(2, "中邱", 28);

        } else if (userId.equals("3")) {
            //老邱
            user = new User(3, "老邱", 38);
        }
        ResultVO<User> resultVO = null;
        if (user == null) {
            resultVO = new ResultVO<>(false, "查询失败!", user);
        } else {
            resultVO = new ResultVO<>(true, "查询成功!", user);
        }
        JsonUtils.javaBean2ResponseText(resp, resultVO);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

09-服务器渲染和浏览器渲染(掌握)

  • 服务器渲染
    • image-20220319141416915
  • thymeleaf是服务器渲染
    • 服务器渲染要求服务器返回给浏览器的是页面文件
  • 浏览器渲染
    • image-20220319141449103
    • vue是浏览器渲染
      • 浏览器渲染要求服务器返回给浏览器的是json字符串 32W EEW3223WE3223322222222222222222
胖ۣۖ虎ۣۖ
关注
专栏目录
axios 获取上传进度_ajax axios 下载文件时如何获取进度条 process
weixin_39750190的博客
01-17 893
html>下载进度条.containerBar{width:521px;border:1pxsolid#008fcd;height:21px;border-radius:10px;overflow:hidden;}#bar{background:#008fcd;float:left;height:100%;text-align:center;line-height:150%;}#to...
Day01_AJAX入门
学习是最低成本的投资
07-26 567
AJAX 概念和 axios 使用、URL 查询参数、常用请求方法和数据提交、HTTP协议-报文、接口文档、form-serialize 插件
Day03_AJAX原理
一只小老虎
04-15 421
ajax原理学习
day11-Ajax&Axios&JSON&项目
qq_74289024的博客
06-30 454
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。。JavaScript 对象表示法.由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输为什么要用json？JSON1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小。
AJAX、Axios、Json（Day06）
qq_41756326的博客
04-15 232
AJAX、Axios、JSON
Vue基础学习笔记Day05_生命周期_axios
Li9527999qq的博客
05-03 289
今日目标: 能够说出vue组件生命周期 能够掌握axios的使用 能够了解refs, nextTick使用和name使用 能够完成购物车案例开发 学习内容： 学习目录: Vue生命周期 axios nextTick和refs知识 今日总结 面试题 知识点自测 知道window.onload的作用 ajax是什么, XMLHttpRequest的使用步骤 jQ的 $.ajax底层是什么? Promise的作用 async和await的作用-如何和Promise配合 同步异步的概念, 代码执行顺序
A064_单页面组件_ElementUI_Mock_axios
窗外有风景，笔下有前途，低头是题海，抬头是未来
06-23 365
ElementUI综合练习-day01 一、内容介绍 1. 搭建前端环境； （掌握） 2. 前端UI框架ElementUI简单入门 （掌握） 4. Mock.js(了解) 5. EasyMock后端模拟数据 6. Axios 7. ElementUI综合案例（CRUD） 二、搭建前端项目 1、Idea创建一个static web项目 2、根目录下执行vue命令 1. npm install -y 2. npm install vue 3. vue i
Day04_AJAX进阶
一只小老虎
04-15 471
ajaxj进阶学习
Day3-Ajax-Axios-前端工程化
rc4gyyc的博客
08-28 95
/发送异步请求，加载数据。
day6_ajax01.zip
06-28
8. **AJAX与前端框架**：现代前端框架如React、Vue和Angular都有自己的封装好的Ajax库，如React的`fetch` API、Vue的`axios`或Angular的`HttpClient`，简化了Ajax的使用。 9. **jQuery中的Ajax**：jQuery提供了一个...
ajax-day01.rar_达内开发学习笔记
09-20
除了jQuery，还有许多现代库和框架提供了更高级别的抽象，如axios、Fetch API、Vue.js的axios插件、React的fetch或axios集成等，它们使得Ajax开发更加便捷。 综上所述，“ajax-day01”的学习笔记应该涵盖了Ajax的...
Day_10 传智健康项目-权限控制、图形报表
lbw18的博客
06-18 371
前面我们已经学习了Spring Security框架的使用方法，本章节我们就需要将Spring Security框架应用到后台系统中进行权限控制，其本质就是认证和授权。要进行认证和授权需要前面课程中提到的权限模型涉及的7张表支撑，因为用户信息、权限信息、菜单信息、角色信息、关联信息等都保存在这7张表中，也就是这些表中的数据是我们进行认证和授权的依据。所以在真正进行认证和授权之前需要对这些数据进行管理，即我们需要开发如下一些功能：1、权限数据管理（增删改查）2、菜单数据管理（增删改查）3、角色数据管理（增删改
08-node.js--ajax,axios
m0_57103348的博客
08-16 218
ajax思想 promise封装ajax axios 和 fetch async和await
06_实现watch
qq_53109172的博客
10-16 733
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
web扩展
x737510的博客
10-10 605
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 151
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 273
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 500
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 622
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Request failed with status code 404 AxiosError@webpack-internal:///./node_modules/axios/lib/core/AxiosError.js:23:18 settle@webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12 onloadend@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:106:66 EventHandlerNonNull*dispatchXhrRequest@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:119:7 __webpack_exports__.default<@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:57:10 dispatchRequest@webpack-internal:///./node_modules/axios/lib/core/dispatchRequest.js:53:10 request@webpack-internal:///./node_modules/axios/lib/core/Axios.js:136:77 forEachMethodNoData/Axios.prototype[method]@webpack-internal:///./node_modules/axios/lib/core/Axios.js:158:17 wrap@webpack-internal:///./node_modules/axios/lib/helpers/bind.js:9:15 getPostContent/<@webpack-internal:///./src/tools/FileManager.js:20:53
06-03
它的出现可能是由于你使用 Axios 进行网络请求时，请求的 URL 不正确或者请求的资源不存在。建议你检查请求的 URL 是否正确，如果 URL 正确，那么可能是服务器端的问题，你可以尝试联系服务器管理员解决这个问题。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值