深圳市官方网站开发公司磁力狗bt
介绍
Axios对原生Ajax进行了封装，简化书写，快速开发
官网：Axios中文文档 | Axios中文网 (axios-http.cn)
入门
1引入Axios的js文件
<script src="js/axios.js"></script>2使用Axios发送请求，并获取响应结果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>function get(){axios({ mehod:"get",url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result=>{console.log(result);})}function post(){axios({ mehod:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1;"}).then(result=>{console.log(result);})}</script></html>axios({....对象信息....mehod,url(data)}).then(result)=>{}
then后面接一个result的自定义函数
post有个而外的data
请求方式别名
改写
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>// function get(){// axios({ mehod:"get",// url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result=>{// console.log(result);// })// }axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result);})// function post(){// axios({ mehod:"post",// url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",// data:"id=1;"// }).then(result=>{// console.log(result);// })//}axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result=>{console.log(result);})</script></html>案例：网页加载完成，调用vue生命周期的mounted（）向服务器发送请求返回数据赋值遍历渲染表格
数据
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<script src="js/axios.js"></script>
<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 v-for="(emp,index) in emps" align="center"><th>{{index+1}}</th><th>{{emp.name}}</th><th><img : src="emp.image" width="70px" height="50px"></th><th v-if="emp.gender=1">男</th><th v-else>女</th><th>{{emp.jop}}</th><th>{{emp.entrydate}}</th><th>{{emp.updatetime}}</th></tr></table>
</div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{emps:[]},methods:{},mounted(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{this.emps=result.data.data;})}})
</script>
</html>