Vue-resource实现get,post,jsonp请求
Vue-resource是和Vue高度集成的第三方包
还有一种发送ajax的请求之外还有一种axios的第三方包实现数据的请求。
第一步,下载Vue-reource
第二步,在Vue下导入Vue-resource
第三步,创建一个请求访问
get
使用button触发事件,
getInfo() {//发起get请求
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
console.log(result.body)
})
}
其中result是get请求后返回的结果集,可以通过输出获取结果集
但是这个地址貌似不可用,通过result拿到服务器返回的数据
post
postInfo() {//发起get请求
// this.$http.post('http://vue.studyit.io/api/post',{},{}).then(function (result) {
// console.log(result.body)
// })
this.$http.post('http://vue.studyit.io/api/post',{},{}).then(result=> {
console.log(result.body)
})
}
//发起post请求,application/x-www-form-unlencoded
//手动发起的post请求是没有表单格式的,所以,有些服务器处理不了
//所以需要在第三个参数里面传入emulateJSON:true,将提交的数据类型转换成普通表单的数据格式
其中第一个{}是向服务器传入的数据
jsonp
jsonpInfo(){
this.$http.jsonp('http://vue.studyit.io/api/post').then(result=>{
console.log(result.body)
})
}
jsonp的请求方式需要建立虚拟的服务器请求方式,待续》》》》》
网友评论