🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍
文章目录
1.0 Ajax 概述
2.0 Axios 概述
3.0 综合案例
1.0 Ajax 概述
通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。异步交互是指，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：用户名是否可用的校验等等。
简单来说，Ajax 的作用就是用来发送请求给服务器，得到响应后获取数据。
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="id1"> </div> </body> <script> /* 1.0 创建对象 */ var xmlHttpRequest = new XMLHttpRequest(); /* 2.0 发送异步请求 */ xmlHttpRequest.open("get","http://api.doc.jiyou-tech.com/mock/6391/text"); xmlHttpRequest.send(); /* 3.0 获取数据 */ xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ document.getElementById("id1").innerHTML = xmlHttpRequest.responseText; } } </script> </html>运行结果：
成功获取服务器的响应，xmlHttpRequest.readyState 的值会赋值为 4 ，status 的值为 200 。
手册： AJAX - XMLHttpRequest 对象 (w3school.com.cn)
2.0 Axios 概述
Axios 是对原生的 Ajax 进行了封装，简化书写，快速开发。作用同样是给服务器发送请求，并获取服务器响应的数据。
引入 Axios 的 js 文件：
采取的是 CDN 的方式导入到 HTML 中。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
语法结构：
<script> axios({ methods:"get", url:"http://api.doc.jiyou-tech.com/mock/6391/text" }).then((result) => { alert(result); }) axios({ methods:"post", url:"http://api.doc.jiyou-tech.com/mock/6391/text" }).then((result) => { alert(result); }) </script>如果在 get 中有参数添加，直接在 url 后面接上 ? 后面加上参数即可；如果在 post 中有参数添加，需要对象 data 中添加参数，如：
axios({ methods:"post", url:"http://api.doc.jiyou-tech.com/mock/6391/text", data:"id=1" }).then((result) => { alert(result); })还有更加简便的写法：
<script> axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => { alert(result); }) axios.post("http://api.doc.jiyou-tech.com/mock/6391/text","id=1").then((result) => { alert(result); }) </script>一般用这种方式比较多。
使用 Axios 发送请求，并获取响应结果
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <span >{{emps.name}}</span> </div> </body> <script> new Vue({ el:"#app", data:{ emps:"" }, mounted() { axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => { this.emps = result.data; }) } }) </script> </html>利用 Axios 获取数据后，交给 Vue 进行网页的渲染。
3.0 综合案例
利用 Axios 向服务器发送请求，并返回服务器响应的结果，再交给 vue 对网页进行渲染。
模拟服务器中的数据：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <table border="1px" cellspacing="0px" align="center" width="400px"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> </tr> <tr v-for="(emp, index) in emps"> <td align="center">{{index+1}}</td> <td align="center">{{emp.name}}</td> <td align="center">{{emp.age}}</td> <td align="center" v-if="emp.gender == 1">男</td> <td align="center" v-if="emp.gender == 2">女</td> <td align="center">{{emp.score}}</td> </tr> </table> </div> </body> <script> new Vue({ el:"#app", data:{ emps:[] }, mounted() { axios.get("http://api.doc.jiyou-tech.com/mock/6407/text").then((result) => { this.emps = result.data.data }) } }) </script> </html>还用到了 vue 生命周期中的 mounted() ，挂载结束后，就会自动调用该函数。this 将获取的 json 赋值给当前对象的 emps 。
运行结果：
