JavaWeb-10-Ajax、Axios

最新推荐文章于 2024-06-27 19:13:37 发布
最新推荐文章于 2024-06-27 19:13:37 发布
阅读量184 收藏
点赞数
分类专栏： JavaWeb 文章标签： ajax 前端 javascript vue.js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelitoudu/article/details/130953755
版权

一、引言

在这里插入图片描述

  • 这是之前做的form表单页面，看起来没有任何的美感，只是一些标签的堆砌。

在这里插入图片描述

  • 这是之前完成的vue的小案例，通过vue当中的指令渲染展示出来了这么一个表格，而表格当中的数据，也是在前端页面中固定死的。
  • 但是在真实的项目当中，那这些数据应该是从服务器端获取到的。
  • 如何解决这些问题呢？就要从以下几点出发学习：
    1. Ajax
    2. 前后端分离开发
    3. 前端工程化
    4. Vue组件库Element
    5. Vue路由
    6. 打包部署

二、Ajax

1、概念及作用

  • 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

  • 作用：

    • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

      在这里插入图片描述

    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

      在这里插入图片描述

2、同步与异步

在这里插入图片描述
在这里插入图片描述

  • 同步和异步有什么区别？

    • 同步：

      当客户端（浏览器）向服务器请求数据的时候，需要服务器响应数据给客户端之后，客户端才可以执行其他操作。

    • 异步：

      当客户端（浏览器）向服务器请求数据的时候，客户端则不需要等待服务器响应结果，客户端可以执行其他操作。

3、原生Ajax

① 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
② 创建XMLHttpRequest对象：用于和服务器交换数据
③ 向服务器发送请求
④ 获取服务器响应数据

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>

<body>

    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>

</body>

<script>
    function getData() {
        //1.创建XMLHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send(); //发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function () {
            // xmlHttpRequest.readyState == 4: 判断请求是否已完成且响应已就绪
            // xmlHttpRequest.status == 200: 判断返回请求的状态号是否为200
            // 以上都满足，则说明响应成功
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                // 响应成功：以字符串形式返回响应数据。
                // 之后将响应回来的数据填充到div1这个区域中
                document.getElementById('div1').innerHTML = this.responseText;
            }
        }
    }
</script>

</html>

在这里插入图片描述

原生Ajax请求存在哪些问题？
  1. 这种请求方式比较繁琐
  2. 在早期的浏览器当中还存在浏览器的兼容性问题

所以在现在的项目开发当中原生的Ajax方式已经基本不用了。

现在项目开发当中使用的是基于原生的Ajax封装起来的技术：Axios

三、Axios

在这里插入图片描述

1、概念
  • 介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
  • 官网： https://www.axios-http.cn/
2、Axios入门

① 引入Axios的js文件。

​ 在这里插入图片描述

② 使用Axios发送请求，并获取响应结果。

  • get：

    在这里插入图片描述

  • post：

    在这里插入图片描述

简化书写(推荐)

  • 请求方式别名（推荐使用）：

    • axios.get(url[,config])
    • axios.delete(url[,config])
    • axios.post(url[,data[,config]])
    • axios.put(url[,data[,config]])

  • 发送GET请求

    在这里插入图片描述

  • 发送POST请求

    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios入门</title>
    <!-- 1.引入Axios的js文件 -->
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>

    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get() {
        //通过Axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then((result) => {
        //     console.log(result.data);
        // })

        //请求方式别名形式
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
            console.log(result.data);
        })
    }

    function post() {
        //通过Axios发送异步请求-post
        // axios({
        //     method: "post",
        //     //浏览器访问任何地址都是以get方式访问的，所以直接使用浏览器访问该地址会报错404(请求失败)
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then((result) => {
        //     console.log(result.data);
        // })

        //请求方式别名形式
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
            console.log(result.data);
        })
    }
</script>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3、案例
需求

  • 基于Vue以及Axios完成数据的动态加载展示：

    1. 数据准备的url： http://yapi.smart-xwork.cn/mock/169327/emp/list
    2. 在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)

    在这里插入图片描述

实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios案例</title>

    <!-- 1.引入vue、Axios的js文件 -->
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 创建表格 -->
        <table border="1" cellspacing="0" width="60%">
            <!-- 表头 -->
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <!-- 表格单元数据 -->
            <tr align="center" v-for="(teacher, index) in teachers">
                <!-- 编号 -->
                <td>{{index + 1}}</td>
                <!-- 姓名 -->
                <td>{{teacher.name}}</td>
                <!-- 图像 -->
                <!-- v-bind指令缩写形式 ":" -->
                <td><img :src="teacher.image" width="70px" height="50px"></td>
                <!-- 性别 -->
                <td>
                    <span v-if="teacher.gender == 1">男</span>
                    <span v-if="teacher.gender == 2">女</span>
                </td>
                <!-- 职位 -->
                <td>{{teacher.job}}</td>
                <!-- 入职日期 -->
                <td>{{teacher.entrydate}}</td>
                <!-- 最后操作时间 -->
                <td>{{teacher.updatetime}}</td>
            </tr>
        </table>
    </div>

</body>

<script>
    new Vue({
        el: "#app", //vue接管区域
        data: {
            //接收服务端响应的数据
            teachers: []
        },
        // mounted周期：挂载完成，Vue初始化成功，HTML页面渲染成功。
        mounted() { //钩子函数
            //（发送请求到服务端，加载数据）
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
                this.teachers = result.data.data
            })
        },
    });
</script>

</html>

在这里插入图片描述

学不会is dog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb-Vue
10-08
结合JavaWeb，这个资源包可能还会介绍如何将Vue.js应用与后端服务进行交互，如使用Ajax或axios库发送HTTP请求，实现前后端分离。此外，可能会涉及到Spring Boot或Spring MVC，它们是JavaWeb开发的常用框架，用于提供...
19.JavaWeb-axios
LB_bei的博客
07-13 149
axios被用来前端与后端进行数据交互。
轻松掌握Axios：JavaWeb中使用Axios的基本技巧
2301_77478553的博客
07-17 591
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
【Java Web】Axios实现前后端数据异步交互
最新发布
想做职场小白吗? 我来教您.......
06-27 883
若axios发送的是一个错误、异常的请求，请求拦截器方法2执行处理后，会直接响应给axios请求方法一个失败的Promise对象。后端服务器在处理正常的请求后，响应报文在返回给axios发送请求的调用函数之前会先经过响应拦截器，如果后端响应的是正常的报文则由响应拦截器的方法1处理响应报文后，将其返回给axios请求方法；axios是代替原生的ajax实现前后端数据交互的一套新解决方案，而axios使用的是promise相关的语法，而Promise主要是解决函数回调的问题。
2023/2/23 Web前端axios-入门篇【原理之后补充】
一个搬砖工人
01-13 657
git:全局安装json-server：npm install -g json-server在该文件目录下运行：json-server --watch db.json查看id为1的页面在http://localhost:3000.posts/1其中， /1就是id。
Javaweb之AJAX axios JSON
lpblog的博客
03-12 578
AJAX我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。
axios（尚硅谷）
毕业才是起点
08-06 2785
web前端axios技术
React框架JavaWeb-开发笔记
06-11
前端通过发送Ajax请求（如使用`fetch`或`axios`库）获取后端数据，后端返回的数据会被React组件接收并渲染到页面上。为了处理状态管理，React社区推荐使用Redux或者MobX等工具，它们可以帮助维护应用的状态，并确保...
自学javaweb-b站黑马Xmind思维导图笔记
09-05
AJAX（Asynchronous JavaScript and XML）是用于创建异步Web应用的技术，它使页面能够在不刷新整个页面的情况下更新部分内容。Axios是JavaScript中的一个库，常用于前端与后端的数据交互，支持Promise API。JSON...
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
Java资源/java学习练习项目 javaWeb+Axios+ajax+Mybatis+vue
06-21
JavaWeb 介绍 javaWeb+Axios+ajax+Mybatis+vue 软件架构 软件架构说明 登录,注册没有写，也不需要写吧。 基于element-ui+javaweb+mybatis使用 代码简洁明了，更新操作有些许瑕疵，但不影响使用。
Javaweb之Axios的详细解析
qq_69748833的博客
11-22 1799
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。
JavaWeb学习路线（1）——Ajax到Axios
Zain_horse的博客
06-11 644
Ajax -> Axios
axios基础（一）
爱折腾的技术人
01-09 139
axios1
WEB中对于AXIOS封装
m0_73495473的博客
06-07 107
其中有loading加载，分为实例loading和单个请求loading，可自由配置。其中有三种拦截器，分别为实例拦截器，全局拦截器和单个请求拦截器。
Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求
Arya的博客，专注后端领域
06-10 1682
1.之前用jsp请求存在的问题，同步请求； 2.异步请求Ajax是啥； 3.axios的get和post方法，用axios实现异步请求； 4.vue框架的出现和入门
使用axios进行接口请求和使用Java进行接收
hmwz0001的博客
07-25 599
obj对象里的属性名一定得和people实体类里的属性名一模一样，因为obj对象里的属性名与people实体类里的属性名匹配时，大小写敏感，即区分大小写。路径后面有反斜杠/，注意不要写漏了，不然value就会变成路径的一部分，请求路径就会变成/sys/test后面跟上value的值，从而导致404。3、post+params请求(除了method的请求方式和接收请求用@PostMapping，其他都和普通的get请求一致)2、使用restful规范的get请求。1、axios普通get请求。
《 新手》web前端（axios）后端（java-springboot）对接简解
只会写bug的靓仔的博客
10-01 6461
这篇文章我主要总结了：前端参数请求头意义，后端接受参数的注解，以及跨域的流程，如何处理跨域。**为什么后端处理跨域尽量在业务之前进行？**
掌握Filter、Listener与Ajax：实现权限控制与Ajax请求示例
本资源是一份关于Filter、Listener和Ajax的详细学习...通过学习这部分内容，读者将能够熟练地在JavaWeb应用中集成Filter进行权限控制，利用axios进行Ajax请求，以及处理JSON数据。这都是现代Web开发中不可或缺的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值