发送AJAX请求
1. 简介
vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
参考：GitHub上搜索axios，查看API文档
2. 使用axios发送AJAX请求
- 2.1 安装axios并引入
npm install axios -S
也可直接下载axios.min.js文件
- 2.2 基本用法
axios([options])
axios.get(url[,options]);
传参方式：
1.通过url传参
2.通过params选项传参
axios.post(url,data,[options]);
axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，
所以参数必须要以键值对形式传递，不能以json形式传参
传参方式：
1.自己拼接为键值对
2.使用transformRequest，在请求发送前将请求数据进行转换
3.如果使用模块化开发，可以使用qs模块进行转换
axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title> <script src="https://unpkg.com/vue"></script>
<script src="axios/axios.min.js"></script>
<script> window.onload=function(){
let app = new Vue({
el:'.container',
data:{
users:{
name:'Maria',
age:18
},
GitUsers:{},
uid:'Somnusy'
},
methods:{
send(){
axios({
method:"get",
url:"json/user.json"
}).then(response => {
console.log('发送Ajax请求,请求成功',response.data);
}).catch(response => {
console.log('发送Ajax请求,请求失败',response);
})
},
//GET
sendGet(){
//传参 两种方式
/* axios.get('server/server.php?name=Tom&age=23') */ //通过url传参
axios.get('server/server-get.php',{ //通过params选项传参
params:{
name:'Jan',
age:18
}
})
.then(response => {
console.log('get发送Ajax请求,请求成功',response.data)
})
.catch(response => {
console.log('get发送Ajax请求,请求失败',response)
})
},
//POST
sendPost(){
//axios.post('server/server-post.php','name=Alex&age=26') //1.自己拼接为键值对
axios.post('server/server-post.php',this.users,{ //2.使用transformRequest，在请求发送前将请求数据进行转换
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&'
}
return params;
}
]
})
.then(response => {
console.log('post发送Ajax请求,请求成功',response.data)
})
.catch(response => {
console.log('post发送Ajax请求,请求失败',response)
})
}, getUserById(uid){
axios.get('https://api.github.com/users/'+uid).then(response => {
console.log(response.data);
this.GitUsers=response.data;
}).catch(response=>{
console.log('请求失败');
})
}
}
})
} </script> </head> <body> <div class="container">
<button v-on:click='send'>发送Ajax请求</button>
<button v-on:click='sendGet'>get发送Ajax请求</button>
<button v-on:click='sendPost'>post发送Ajax请求</button> <br>
<br>
<hr>
<br>
<br>
<!-- 获取GitHub账号的信息-->
GitHub ID : <input type="text" v-model="uid">
<br>
<br>
<button v-on:click="getUserById(uid)">获取GitHub账户信息并显示</button>
<p>用户信息</p>
<p>姓名:{{GitUsers.login}}</p>
<p>头像: <img :src="GitUsers.avatar_url" alt=""></p>
</div> </body> </html>