Vue中vue-resource实现get,post,jsonp请求

Vue中vue-resource实现get,post,jsonp请求

除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求

常见的数据请求类型 get post jsonp

JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);

vue-resource 的配置步骤:

直接在页面中,通过script标签,引入 vue-resource 的脚本文件;
注意:引用的先后顺序是:先引用 Vue 的脚本文件,再引用 vue-resource 的脚本文件;

发送get请求:

this.$http.get('url地址请求体').then(function() {
                        console.log(result.body)

发送post请求

// 发起post请求   applicaton/x-www-form-urlencoded
                    //手动发起的post请求,默认没有表单格式,所以,有的服务器处理不了
                    //第二个参数,要提交给服务器的数据
                    // 通过post方法的第三个参数,{emulateJsON:true} 设置 提交的内容类型为普通表单数据格式
                    this.$http.post('url地址', {}, {
                        emulateJSON: true
                    }).then(result => {
                        console.log(result.body)
                    })

发起JSONP请求

this.$http.jsonp('url地址请求体').then(result => {
                        console.log(result.body)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值