vue中的几种ajax请求方式

首先需要引用vue-resource:

<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>

1、get请求

new Vue({
el: "#app",
data:{
obj:null
},
methods:{
getdata:function () {
//1.0请求url
var url = 'https://api.github.com/users';

//2.0利用 vue-resource发出ajax的get请求
this.$http.get(url)//发出请求
.then(function (response) {
//response.body 就是获取到http://vueapi.ittun.com/api/getprodlist响应回来的数据格式为:json数据格式

this.obj = response.body;
})//获取服务器响应回来的数据
}
}
})

2、post请求

new Vue({
el: '#app',
methods: {
postdata: function () {
//将数据通过vue-resource的post方法提交给https://api.github.com/users
var url = 'https://api.github.com/users';

/*2.0调用 $http.post(url,
传入到服务器的请求报文体的数据,{emulateJSON:true})方法*/
this.$http.post(url,{type: 'User'})
.then(function (response) {
alert(response.body);
})
}
}
})

3、jsonp请求

new Vue({
el: '#app',
data: {
obj: null
},
methods: {
jsonsget: function () {
this.$http.jsonp('https://api.github.com/users')
.then(function (response) {

this.obj = response.body.data;
})
}
}
})

获取到的数据:

图片.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容