本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下
使用vue-resource
引入vue-resource
vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件
基本语法
// 在一个Vue实例内使用$http
this.$http.get('/someUrl',errorCallback);
this.$http.post('/someUrl',errorCallback);
this.$http.get('/someUrl',errorCallback);
this.$http.post('/someUrl',errorCallback);
在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。
options对象
实例:
GET请求
get方法:
错误回调
});
在该实例中,我们准备了一个PHP文件,该文件主要接收前台通过get传过来的参数,并计算两个参数的和,代码如下:
PHP;">
Box" style="margin-top:100px">
+
=
Box",data:{
a:"",b:""
},methods:{
add:function(){
this.$http.get("get.PHP",{
"a":this.a,"b":this.b
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
POST请求
PHP;">
Box",data:{
a:"",b:""
},methods:{
add:function(){
this.$http.post("post.PHP",{
"a":this.a,"b":this.b
},{
emulateJSON:true //POST请求需要将emulateJSON设置为true
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
JSONP
jsonp的语法跟get,post差不多,只是传递的数据不一样。接下来,我们用jsonp来完成一个百度搜索的功能。
1.首先准备一个实例的接口,这个接口是百度的搜索接口(我们可以自己找一些接口作为测试),如下:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
2.准备布局
Box" style="margin-top:100px">
- 22222
暂无数据...