发送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>