一、发送AJAX请求
1、简介
vue本身不支持发送ajax请求,需要axios、vue-resource等插件实现
axios 是基于promise的http请求客户端,用来发送请求,也是vue 2.0官方推荐的,同时不在对vue-resource进行更新和维护
参考:GitHub 上搜索axios,查看API文档
2、使用axios发送ajax请求
2.1 安装axios并引入
也可以直接下载axios.min.js
2.2 基本用法
axios([options])
axios.get(url,[options]);
传参:
a.通过url的方式传参
b.通过params传参:params:{name:"",age:""}
axios.post(url,data,[options]);
axios默认发送数据时,数据格式是Request Payload,并为我们常用的Form Data形式
所以参数必须以键值对的形式传递,不能以json形式传参
传参方式:
a.参数1=值1&参数2=值2
b.使用transformRequest,在请求发送前将请求数据进行转换
axios.post('serve.php',{name:"",age:''},{
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
c.如果使用模块化开发,可以使用qs模块进行转化
axios 本身并不支持发送跨域的请求,没有提供相应的API,作者也暂时没有计划在axios添加发送跨域请求,所以只能使用第三方库
3、使用vue-resource发送跨域请求
3.1 安装vue-resource
cnpm install vue-resource -S
3.2 基本用法
this.$http.get(url,[options])
this.$http.head(url,[options])
this.$http.delete(url,[options])
this.$http.jsonp(url,[options])
this.$http.post(url,[body],[options])
this.$http.put(url,[body],[options])
this.$http.patch(url,[body],[options])