正文
vue.js的ajax和jsonp请求
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
首先要声明使用ajax 在 router下边的 Index.js中
import VueResource from 'vue-resource'; Vue.use(VueResource);
ajax 和 jsonp 使用方法：
//在Vue实例类使用
this.$http.get(url, [options]).then(successCallback, errorCallback); var test = new Vue({
el:'#v',
data:{
jsonUrl:'xxxx',
jsonpUrl:'xxxxx',
req:{}
resData:[]
},
mthods:{
init:function(id){
this.$http.get(this.jsonUrl,this.req).then(function(res){
console.log(res);
this.$set('resData',res);
},function(res){
console.warn(res);
})
},
cli:function(id){
//jsonp请求
this.$http.jsonp(this.jsonpUrl).then(
function(res){
console.log(res);
this.$set('resData',res);
}
)
}
}
})
//需要注意的是jsonp请求的服务端返回的数据格式有些不一样，下面以PHP为例
[php] view plain copy
$call = $_GET['callback'];
$json = json_encode(['data'=>'tttttt']);
echo $call.'('.$json.')';
vue请求数据方法
1、get 请求并传递参数方法
var param = {
page: this.page,
pageSize: this.pageSize,
sort:
};
this.$http.get('/goods',{
params: param
}).then((response) => {
response = response.body.result.list;
this.shopList = response;
});
2、原始的拼接参数方法
this.$http.get('/goods?page='+this.page+'&pageSize='+this.pageSize+'&sort=1').then((response) => {
console.log(response)
response = response.body.result.list;
this.shopList = response;
console.log(this.shopList)
});
3、post的请求
this.$http.post('in.php',{a:,b:},{emulateJSON:true}).then( (res) => {
console.log(res.data)
} )
