注意要引入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>