vue笔记-08（vue-resource发起get,post,

2020-05-09 本文已影响0人 7ColorLotus

vue-resource是vue中可以替换jquery中的ajax请求功能的库
除了vue-resource，还可以使用axios的第三方包实现数据的请求，vue2.0版本推荐使用axios
在vue包后面导入vue-resource,vue-resource依赖于vue，下载vue-resource包：https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js
使用get请求：
- this.$http.get(url,[options]).then(successCallback,errorCallback)
- 使用result.body获得请求成功的数据
使用Post请求：
- this.$http.get(url,[body],[options]).then(successCallback,errorCallback)
- 手动发起的POST请求，默认没有表单格式，所以，有的服务器处理不了，可以通过post方法的第三个参数{emulateJSON:true}设置提交的内容类型为普通表单数据格式
- 使用result.body获得请求成功的数据
使用JSONP请求
- this.$http.jsonp(url, [options]).then(successCallback, errorCallback)
- 使用result.body获得请求成功的数据
JSONP的实现原理
- 由于浏览器的安全性限制，不允许AJAX访问协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓JSONP只支持GET请求）
- 具体实现过程：
  1）先在客户端定义一个回调方法，预定义对数据的操作
  2）再把这个回调方法的名称通过URL传参的心事，提交到服务器的数据接口
  3）服务器数据接口阻止好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行
  4）客户端拿到服务器返回的字符串之后，当作script脚本去解析执行，这样就能够拿到JSONP的数据了
代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-resource演示</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="button" value="get" @click="get()">
            <input type="button" value="post" @click="post()">
            <input type="button" value="jsonp" @click="jsonp()">
        </div>
        <div>
            {{ content }}
        </div>
    </div>
    <script>
        //用于jsonp请求回调的函数
        function jsonpCall(){
            console.log("jsonp Call success")
        }


        var vm = new Vue({
            el: "#app",
            data: {
                content:''
            },
            methods:{
                get(){ //如果是静态文件直接运行，需要处理跨域问题
                    var url = "http://localhost:10439/say_hi"
                    this.$http.get(url, function(result){
                        this.content = result.body
                    },function(res){
                        console.log("请求失败")
                    })
                },

                post(){ //如果是静态文件直接运行，需要处理跨域问题
                    var url = "http://localhost:10439/say_hi_post"
                    var param = {data : 'test'}
                    this.$http.post(url, param , function(result){
                        this.content = result.body
                    },function(res){
                        console.log("请求失败")
                    })
                },

                jsonp(){ //前端处理跨域请求的一种方式，只有get请求
                    var url = "http://localhost:10439/jsonp_call"
                        this.$http.jsonp(url, function(result){
                        this.content = result.body
                    })
                }
            }
        })
    </script>
</body>
</html>

vue笔记-08（vue-resource发起get,post,

猜你喜欢

热点阅读