vue 交互 跨域獲取數據


注意要引入vue-resource.js

<script src="js/vue-resource.js"></script>

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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM