vue2.0,jsonp的一個(gè)小案例 請(qǐng)求百度搜索的接口

我的新博客上線了监徘,請(qǐng)多多支持

https://sky-xsk.github.io/

我用的是vue-cli,可以自己去下一個(gè)試試看吧碾!
JSONP(JSON with Padding)是JSON的一種“使用模式”凰盔,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。由于同源策略倦春,一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通户敬,而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開(kāi)放策略睁本,網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料尿庐,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON呢堰,而是任意的JavaScript抄瑟,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。
這里用的"vue-resource"里的示例枉疼;
下面開(kāi)始了:

html:

<template>
  <div class="bar">
      <div id="box">
        <h1>jsonp請(qǐng)求百度接口</h1>
        <input type="text" v-model="t1" @keyup="get($event)" placeholder="請(qǐng)輸入您要搜索的關(guān)鍵詞" class="input_s"  @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
        <ul class="ul_se">
            <li v-for="(value,$index) in myData" :class="{gray:$index==now}" @click="clickChose($index)">
                {{value}}
            </li>
        </ul>
        <p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
    </div>

  </div>
</template>

js:

<script>
    export default {
        data() {
            return {
                myData:[],
                    t1:'',
                    now:-1,
            }
        },
         methods:{
             get(ev){ //鍵盤(pán)操作
                  if(ev.keyCode==38 || ev.keyCode==40)
                        return;
                 if(ev.keyCode==13){
                       window.open('https://www.baidu.com/s?wd='+this.t1);
                       this.t1='';
                }
                this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", //跨域請(qǐng)求接口
                    {
                    params: {
                        wd:this.t1,
                    },
                    jsonp:'cb'
                }).then(function(res){
                    this.myData = JSON.parse(res.bodyText).s
                },function(){
                    console.log("請(qǐng)求失斊ぜ佟!B钗惹资!")
                });
              },

             changeDown(){ //下鍵選擇
                this.now++;
                if(this.now==this.myData.length)this.now=-1;
                this.t1=this.myData[this.now];
            },

            changeUp(){ //上鍵選擇
                this.now--;
                if(this.now==-2)this.now=this.myData.length-1;
                this.t1=this.myData[this.now];
            },
             clickChose($index){  //鼠標(biāo)選擇搜索關(guān)鍵詞事件
                this.now = $index;
                this.t1=this.myData[this.now];
                window.open('https://www.baidu.com/s?wd='+this.t1);
            },

       },
    }
</script>

css:

<style scoped>
.ul_se{ background: #fff; border: 1px solid #ccc; width: 100%;}
.ul_se li{list-style: none; height: 30px; line-height: 30px; cursor: pointer;}
.input_s{width: 400px; height: 30px; padding-left: 10px;}
.gray{background: deepskyblue; color: #fff;}
.ul_se li:hover{background: deepskyblue; color: #fff;}
</style>

最終效果:當(dāng)你在輸入框里輸入搜索的關(guān)鍵詞的時(shí)候,就會(huì)自動(dòng)將聯(lián)想的詞匯顯示在下方席舍,按一下“enter”鍵布轿,即可跳轉(zhuǎn)到搜索結(jié)果 的頁(yè)面,同是按“上”来颤,“下”鍵可以進(jìn)行選擇搜索的關(guān)鍵詞汰扭,鼠標(biāo)也可以進(jìn)行操作選擇,跳轉(zhuǎn)福铅!


image.png

以后搜索萝毛,直接打開(kāi)就可以了!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末滑黔,一起剝皮案震驚了整個(gè)濱河市笆包,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌略荡,老刑警劉巖庵佣,帶你破解...
    沈念sama閱讀 212,222評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異汛兜,居然都是意外死亡巴粪,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)肛根,“玉大人辫塌,你說(shuō)我怎么就攤上這事∨烧埽” “怎么了臼氨?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,720評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)芭届。 經(jīng)常有香客問(wèn)我储矩,道長(zhǎng),這世上最難降的妖魔是什么褂乍? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,568評(píng)論 1 284
  • 正文 為了忘掉前任椰苟,我火速辦了婚禮,結(jié)果婚禮上树叽,老公的妹妹穿的比我還像新娘。我一直安慰自己谦絮,他們只是感情好题诵,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著层皱,像睡著了一般性锭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叫胖,一...
    開(kāi)封第一講書(shū)人閱讀 49,879評(píng)論 1 290
  • 那天草冈,我揣著相機(jī)與錄音,去河邊找鬼瓮增。 笑死怎棱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的绷跑。 我是一名探鬼主播拳恋,決...
    沈念sama閱讀 39,028評(píng)論 3 409
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼砸捏!你這毒婦竟也來(lái)了谬运?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,773評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤垦藏,失蹤者是張志新(化名)和其女友劉穎梆暖,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體掂骏,經(jīng)...
    沈念sama閱讀 44,220評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡轰驳,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滑废。...
    茶點(diǎn)故事閱讀 38,697評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蝗肪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蠕趁,到底是詐尸還是另有隱情薛闪,我是刑警寧澤,帶...
    沈念sama閱讀 34,360評(píng)論 4 332
  • 正文 年R本政府宣布俺陋,位于F島的核電站豁延,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏腊状。R本人自食惡果不足惜诱咏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評(píng)論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缴挖。 院中可真熱鬧袋狞,春花似錦、人聲如沸映屋。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,782評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棚点。三九已至早处,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瘫析,已是汗流浹背砌梆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,010評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贬循,地道東北人咸包。 一個(gè)月前我還...
    沈念sama閱讀 46,433評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像甘有,于是被迫代替她去往敵國(guó)和親诉儒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理亏掀,服務(wù)發(fā)現(xiàn)忱反,斷路器,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • 親愛(ài)的歡兒: 今天是你回武漢的第一天滤愕,好想你温算。早上醒來(lái)的時(shí)候沒(méi)有你在對(duì)面香汗淋漓的酣睡,或者坐在我床邊鬧我间影;...
    老胡Boba閱讀 136評(píng)論 0 0
  • 真希望現(xiàn)在注竿、此刻,有個(gè)人,能夠上前抓住我的胳膊巩割,告訴我:你別亂? 記不清自己多少次絕望裙顽,也記不清了,那每一次的心軟...
    許愿樹(shù)樹(shù)閱讀 87評(píng)論 0 0