使用vue-resource
注意事项:
- 下载并导入vue-resource(将挂载一个this.$http这个属性)
- 它依赖于vue,要先导入vue再导入vue-resource
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
Vue.http.jsonp(url, [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.jsonp(url, [options]).then(successCallback, errorCallback);
注:post[ ]不能省,body,就是要传入后端的数据,options为配置对象,都由一个{}包裹的参数对象,successCallback为成功的回调,必需要;errorCallback为失败回调,随意;
.then都是由promise封装的,
进行发起get请求:
methods:{
getBookList() {
this.$http.get(“http://127.0.0.1/admin/product_list.php”).then(result => {
if (result.status === 200) {
// console.log(result.body); 使用时先打印到后台查看输出的数据信息,查看需要的数据
this.list = result.body; //将body里的数据给list再进行遍历渲染
}
});
},
}
发起post请求:
post:function(){
//发送 post 请求
this.$http.post(’/try/ajax/demo_test_post.php’,{name:“菜鸟教程”,url:“http://www.runoob.com”},{emulateJSON:true}).then(function(res){
console.log(res.body);
});
出现这个报错:
原因:手动发起的post请求,默认没有表单格式,有的服务器处理不了
就必须在第三个参数里加入{emulateJSON:true},设置提交类型为普通表单数据格式
发起jsonp请求:
post:function(){
//发送 post 请求
this.$http.jsonp(’/try/ajax/demo_test_post.php’).then(function(res){
console.log(res.body);
});