一. Ajax介绍
Ajax：Asyncharonous JavaScript And Xml，异步的JavaScript和XML(Extensible Markup Language 可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构)
作用：
(1) 数据交换 通过Ajax可以给服务器发送请求，并获取服务器响应的数据
(2) 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等；
二. Axios
-
介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发
3.步骤：
(1) 引入Axios的js文件(参照官网)
javascript
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js">
</script>(2) 使用Axios发生请求，并获取响应结果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax入门</title>
</head>
<body>
</body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 使用Axios发生请求，并获取响应结果
axios({
// 配置对象
//请求方式 GET/POST
method:'get',
//请求路径
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
//POST 请求参数
// data:{
// name:'张三',
// age:18
// },
//get请求参数 或者直接拼到URL后面
params:{
name:'张三',
age:18
}
}).then((result) =>{
// 响应结果
console.log(result.data);
}).catch((error) =>{
// 响应失败
alert.log(error);
})
</script>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax入门-Axios</title>
</head>
<body>
<input type="button" value="获取数据-GET" id="btnGet">
<input type="button" value="获取数据-POST" id="btnPost">
</body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送Get请求
document.querySelector('#btnGet').addEventListener( 'click', () =>{
axios({
method:'GET',
//请求路径并拼接参数
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
}).then((result) =>{
console.log(result.data);
}).catch((error) =>{
alert.log(error);
})
})
//发送Post请求
document.querySelector('#btnPost').addEventListener('click', () =>{
axios({
method:'post',
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update'
//Post请求参数
// data:{
// type:'social'
// }
}).then((result) =>{
console.log(result.data);
}).catch((error) =>{
alert.log(error);
})
})
</script>
</html>
三. Axios-请求方式别名
为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data[, config]])
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax入门-Axios简化</title>
</head>
<body>
<input type="button" value="获取数据-GET" id="btnGet">
<input type="button" value="获取数据-POST" id="btnPost">
</body>
<!-- 1. 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送Get请求
document.querySelector('#btnGet').addEventListener('click', () =>{
//axios简化
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) =>{
console.log(result.data);
}).catch((error) =>{
alert.log(error);
})
})
//发送Post请求
document.querySelector('#btnPost').addEventListener('click', () =>{
//axios简化
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update',
'name=韦一笑'
).then((result) =>{
console.log(result.data);
}).catch((error) =>{
alert.log(error);
})
})
</script>
</html>四. 案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios案例</title>
</head>
<body>
<div id="container">
<hr></hr>
{{searchFrom}}
<form class="search-from">
<label for="name">姓名</label>
<input type="text" name="name" id="name" v-model="searchFrom.name" placeholder="请输入姓名">
<label for="gender">性别</label>
<select name="gender" id="gender" v-model="searchFrom.gender">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
<button type="button" v-on:click="search">查询</button>
<button type="button" @click="clear">重置</button>
</form>
<hr>
<table border="1" style="width: 50%;height: 50%;">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
</tr>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<!-- v-if 控制-->
<span v-if="item.gender==1">男</span>
<span v-else-if="item.gender==2">女</span>
<span v-else>未知</span>
<!-- v-show 控制-->
<!-- <span v-show="item.gender==1">男</span>
<span v-show="item.gender==2">女</span>
<span v-show="item.gender!=1 && item.gender!=2">未知</span> -->
</td>
<td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td>
</tr>
</tbody>
</thead>
</table>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
//封装查询条件
searchFrom:{
name:'',
gender:''
},
// 数组
list:[
]
}
},
//方法
methods:{
//查询
search(){
//简写
axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`).then((result) =>{
this.list=result.data.data;
}).catch((error) =>{
console.log(error);
})
},
//清空表单项数据
clear(){
this.searchFrom.name='';
this.searchFrom.age='';
this.searchFrom.gender='';
this.search();
}
}
}).mount('#container');
</script>
</html>五. async & await
可以通过async、await可以让异步变为同步操作。
async就是用来声明一个异步方法，await是用来等待异步任务执行。
await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。
javascript
//查询
async search(){
//简写
let result = await axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`);
this.list=result.data.data;
},六. Vue生命周期
上述代码会在页面刷新时清空数据(列表展示为空)，需要调用钩子方法来加载页面。
生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
生命生命周期方法：与data平级
|---------------|-------|
| 状态 | 阶段周期 |
| beforCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeUnmount | 组件销毁前 |
| unmounted | 组件销毁后 |
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue生命周期</title>
</head>
<body>
<div id="container">
<hr></hr>
{{searchFrom}}
<form class="search-from">
<label for="name">姓名</label>
<input type="text" name="name" id="name" v-model="searchFrom.name" placeholder="请输入姓名">
<label for="gender">性别</label>
<select name="gender" id="gender" v-model="searchFrom.gender">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
<button type="button" v-on:click="search">查询</button>
<button type="button" @click="clear">重置</button>
</form>
<hr>
<table border="1" style="width: 50%;height: 50%;">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
</tr>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<!-- v-if 控制-->
<span v-if="item.gender==1">男</span>
<span v-else-if="item.gender==2">女</span>
<span v-else>未知</span>
<!-- v-show 控制-->
<!-- <span v-show="item.gender==1">男</span>
<span v-show="item.gender==2">女</span>
<span v-show="item.gender!=1 && item.gender!=2">未知</span> -->
</td>
<td><img class="avatar" v-bind:src="item.image" :alt="item.name"></td>
</tr>
</tbody>
</thead>
</table>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
//封装查询条件
searchFrom:{
name:'',
gender:''
},
// 数组
list:[
]
}
},
//生命周期 钩子函数
mounted(){
//页面加载完成之后 发送ajax请求
this.search();
},
//方法
methods:{
//查询
async search(){
//简写
let result = await axios.get(`https://mock.apifox.cn/m1/3083103-0-default/emps/list?name=${this.searchFrom.name}&gender=${this.searchFrom.gender}`);
this.list=result.data.data;
},
//清空表单项数据
clear(){
this.searchFrom.name='';
this.searchFrom.age='';
this.searchFrom.gender='';
this.search();
}
}
}).mount('#container');
</script>
</html>