Vue.js AJAX 跨域调用 JSONP | jQuery | vue-resource | axios

最新推荐文章于 2024-07-15 02:33:27 发布

djk8888

最新推荐文章于 2024-07-15 02:33:27 发布

阅读量389

点赞数

分类专栏： vue.js jquery html 文章标签： vue

本文链接：https://blog.csdn.net/djk8888/article/details/106217351

版权

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

vue.js

10 篇文章 0 订阅

订阅专栏

Vue.js AJAX 跨域调用 JSONP

预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/index.html

jQuery：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue + jQuery AJAX</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
            <tr v-for="people in peoples">
                <td>{{people.id}}</td>
                <td>{{people.name}}</td>
            </tr>
        </table>
    </div>

</body>

</html>
<script>
    var vv = new Vue({
        el: "#app",
        data: {
            peoples: [],
        },
        created: function () {
            this.bind();
        },
        methods: {
            bind: function () {
                $.ajax({
                    type: "get",
                    dataType: "jsonp",
                    jsonp: "callback",
                    jsonpCallback:"callback",
                    url: "http://djk8888.byethost32.com/VueAjax/jsonp.html",
                    success: function (data) {
                        $.each(data, function (index, item) {
                            var sth = { id: item.id, name: item.name };
                            vv.peoples.push(sth);
                        });
                    }
                });
            },
        }
    });
</script>

预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/jQuery.html

vue-resource：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue.js Ajax(vue-resource)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.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">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
            <tr v-for="people in peoples">
                <td>{{people.id}}</td>
                <td>{{people.name}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                peoples: [],
            },
            created: function () {
                this.bind();
            },
            methods: {
                bind: function () {
                    this.$http.jsonp('http://djk8888.byethost32.com/VueAjax/jsonp.html', { jsonpCallback: "callback" }).then(function (res) {
                        for (var index in res.data) {
                            var sth = { id: res.data[index].id, name: res.data[index].name };
                            vv.peoples.push(sth);
                        }
                    }, function () {
                        console.log('请求失败处理');
                    });
                },
            }
        });
    </script>

</body>

</html>

预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/resource.html

axios(axios本身不支持调用jsonp，通过原生javascript的ajax来调用jsonp，当然也可以用jQuery来调用)：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue.js Ajax(axios)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
            <tr v-for="people in peoples">
                <td>{{people.id}}</td>
                <td>{{people.name}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                peoples: [],
            },
            created: function () {
                this.bind();
            },
            methods: {
                bind: function () {
                    js_ajax({
                        url: "http://djk8888.byethost32.com/VueAjax/jsonp.html",  // 请求地址
                        jsonp: "callback", // 采用jsonp请求，且回调函数名为"jsonpCallbak"，可以设置为合法的字符串    
                        data: {},  // 传输数据
                        success: function (data) {  // 请求成功的回调函数         
                            for (var index in data) {
                                var sth = { id: data[index].id, name: data[index].name };
                                vv.peoples.push(sth);
                            }
                        },
                        error: function (error) { }  // 请求失败的回调函数
                    });
                },
            },
        });
        //原生javascript的ajax调用jsonp
        function js_ajax(params) {
            params = params || {};
            params.data = params.data || {};
            var json = params.jsonp ? jsonp(params) : json(params);
            // jsonp请求  
            function jsonp(params) {
                //创建script标签并加入到页面中  
                var callbackName = params.jsonp || params.jsonpCallback;
                var head = document.getElementsByTagName('head')[0];
                // 设置传递给后台的回调参数名  
                params.data['callback'] = callbackName;
                var data = formatParams(params.data);
                var script = document.createElement('script');
                head.appendChild(script);
                //创建jsonp回调函数  
                window[callbackName] = function (json) {
                    head.removeChild(script);
                    clearTimeout(script.timer);
                    window[callbackName] = null;
                    params.success && params.success(json);
                };
                //发送请求  
                script.src = params.url + '?' + data;
                //为了得知此次请求是否成功，设置超时处理  
                if (params.time) {
                    script.timer = setTimeout(function () {
                        window[callbackName] = null;
                        head.removeChild(script);
                        params.error && params.error({
                            message: '超时'
                        });
                    }, time);
                }
            };
            //格式化参数  
            function formatParams(data) {
                var arr = [];
                for (var name in data) {
                    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
                };
                // 添加一个随机数，防止缓存  
                arr.push('v=' + random());
                return arr.join('&');
            }
            // 获取随机数  
            function random() {
                return Math.floor(Math.random() * 10000 + 500);
            }
        }
    </script>
</body>

</html>

预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/axios.html