我的新博客上線了监徘,請(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)福铅!
以后搜索萝毛,直接打開(kāi)就可以了!