Vue-resource作为插件的形式存在,通过XMLHttpRequest或JSONP发起请求并处理响应,在开发中也非常常见,下面用vue-resource来请求books
get:在vue中新增ready对象,当页面加载完成时就去请求
new Vue({
el: '#app',
ready: function() {
this.$http.get('book.json', function(data) {
this.$set('books', data);
}).error(function(data, status, request) {
console.log('fail' + status + "," + request);
})
},
data: {
....
books:''
},
这里讲json格式的数据保存在book.json中,这段数据你可以直接使用JSON.stringify()得到:
[
{"id":1,"author":"曹雪芹","name":"红楼梦","price":32},
{"id":2,"author":"施耐庵","name":"水浒传","price":30},
{"id":"3","author":"罗贯中","name":"三国演义","price":24},
{"id":4,"author":"吴承恩","name":"西游记","price":20}
]
post
语法:
this.$http.post(url,postdata,function callback)
在使用的时候遇到一个小坑,这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。解决起来也很简单:
在vue实例中添加headers字段:
http: {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}
后来翻了下vue-resource的源码,发现有更加简单的做法:
Vue.http.options.emulateJSON = true;