Vuejs全家桶系列(二)--- Ajax请求
Vuejs全家桶系列(二)--- Ajax请求
·
简介
vue与ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
ajax基本用法
vue本身不支持发送AJAX请求,需要使用jquery、vue-resource、axios等插件实现
1.自封装ajax
1.1 封装ajax
function ajax(data){
//第一步:创建xhr对象
var xhr = null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else
xhr = new ActiveXObject("Microsoft.XMLHTTP");
//第二步:准备发送前的一些配置参数
xhr.open(data.type,data.url,true);
//第三步:执行发送的动作
if(data.type == 'get'){
xhr.send(null);
}else if(data.type == 'post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data.data);
}
//第四步:指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 ){
if(xhr.status == 200)//执行成功
data.success(xhr.responseText);
else
data.failure();
}
}
}
1.2调用ajax
ajax({
url:'check.php',
data:"username="+username.value+"&password="+password.value,
type:'post',
dataType:'json',
success:function(data){
info.innerHTML = data;
},
failure:function(){
console.log("error!");
}
});
可以参考我的另一篇博客
初窥ajax(一) ——封装ajax
2.使用jquery
2.1 get请求
$.get("check.php",{
name:'admin',
age:'123'
},function(data){
console.log(data);
});
2.2 post请求
$.post("check2.php",{
name:'admin',
age:'123'
},function(data){
console.log(data);
});
3.使用vue-resource
vue2.0不再对vue-resource进行更新和维护
3.1 基本用法
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])
3.2get请求
this.$http.get('check.php',{
params:{
name:'admin',
age:'123'
}
})
.then((res) => {
console.log(res);
}, (error) => {
console.log(error);
});
3.3 post请求
this.$http.post('check2.php',{
name:'admin',
age:'123'
},{emulateJSON: true})
.then((res) => {
console.log(res);
}, (error) => {
console.log(error);
});
3.4 emulateJSON: true的作用
如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。
启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。
4. 使用axios
axios是vue2.0官方推荐的
4.1基本用法
axios([options])
4.11 axios.get(url[,options]);
传参方式:
1.通过url传参
2.通过params选项传参
4.12 axios.post(url,data,[options]);
axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,
所以参数必须要以键值对形式传递,不能以json形式传参
传参方式:
1.自己拼接为键值对
2.使用transformRequest,在请求发送前将请求数据进行转换
3.如果使用模块化开发,可以使用qs模块进行转换
axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库
4.2 get请求
axios.get('check.php',{
params:{
name:'admin',
age:'123'
}
})
.then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
4.3 post请求
//方式一
axios.post('check2.php','name=admin&age=13')
.then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
//方式二
axios.post('check2.php',{
name:'admin',
age:'123'
},{
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
这里不再讨论jsonp,关于jsonp的内容可以参考我的另一篇博客
初窥ajax(二) ——封装jsonp
更多推荐
已为社区贡献6条内容
所有评论(0)