ajax传值 vue_vue 发送ajax请求

一、 简介

1、vue本身不支持发送AJAX请求，需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现

2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

3、参考：GitHub上搜索axios，查看API文档

二、 使用axios发送AJAX请求

1、安装axios并引入

1、npm install axios -S        #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

2、网上直接下载axios.min.js文件

3、通过script src的方式进行文件的引入

2、发送get请求

1、基本使用格式

格式1：axios([options])        #这种格式直接将所有数据写在options里，options其实是个字典

格式2：axios.get(url[,options]);

2、传参方式：

通过url传参

通过params选项传参

3、案例：

发送AJAX请求

el:'#itany',

data:{

user:{

name:'alice',

age:19},

},

methods:{

send(){

axios({

method:'get',

url:'http://www.baidu.com?name=tom&age=23'}).then(function(resp){

console.log(resp.data);

}).catch(resp=>{

console.log('请求失败：'+resp.status+','+resp.statusText);

});

},

sendGet(){

axios.get('server.php',{

params:{

name:'alice',

age:19}

})

.then(resp=>{

console.log(resp.data);

}).catch(err=>{//console.log('请求失败：'+err.status+','+err.statusText);

});

},

}

});

}

发送AJAX请求

GET方式发送AJAX请求