vue 交互跨域获取数据

最新推荐文章于 2022-01-27 10:00:31 发布

转载最新推荐文章于 2022-01-27 10:00:31 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiaoyao/p/9175260.html

文章标签：

#javascript #ViewUI

本文介绍如何利用Vue.js结合百度搜索API通过JSONP方式获取搜索建议，并展示了一个简单的示例应用，该应用通过按钮触发搜索请求并显示结果。

注意要引入vue-resource.js

1、打开百度

2、 F12 选择network 输入a

3、在3出（最后一个，就是最新的）右键 copy copy link address

4、在记事本中粘贴得到

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&
sid=26523_1460_25810_21112_26350_26578_20927&req=2&csor=1&cb=
jQuery11020731639176197594_1528852077791&_=1528852077794

去掉部分无用数据，得到 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a

？前面是我们要用的url 后面是对应的搜索的字段 a

所以对应的代码块如上，jsonp=cb 是因为百度的callback是cb

然后下面的两个函数是对应的请求成功和失败的函数，res是返回的信息，

res.data 是返回的数据

在浏览器地址访问https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a可以看到信息

所以我们的代码中的res.data.s 就是拿到s数组中的信息

运行后就可以看到，点击按钮弹窗

这样我们就通过百度拿到了相关信息

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-resource.js"></script>
        <script type="text/javascript">
            window.onload=function()
            {
                var vm=new Vue({
                    el:'#app',
                     data:{
                        },
                    methods:{
                        haha:function(){
                             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                              wd:'a'
                        },{
                            jsonp:'cb'
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="app">
        <input type="button" value="按钮" @click="haha()" />
        </div>
    </body>
</html>