您的位置：首页 > 产品设计 > UI/UE

跨域请求vue和vue－resource

2017-07-29 17:32 155 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主流搜索引擎</title>

<link rel="stylesheet" href="js/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="#app" class="container">
<form role="form">
<div class="form-group">
<label for="baidu">百度</label>
<input type="text" id="baidu"  v-model="da[0]" @keyup="get($event,0)" @keydown.down.prevent="down1(0)" @keydown.up.prevent="up1(0)" @blur="blurr()" class="form-control">
<ul class="list-group">
<li class="list-group-item " v-for="(value,index) in arr[0]" :class="{active:index==now}" @click="open1(index,0)">{{value}}</li>
</ul>
</div>
<div class="form-group">
<label for="sogo">搜狗</label>
<input type="text" id="sogo" v-model="da[1]" class="form-control" @keyup="get($event,1)" @keydown.down.prevent="down1(1)" @keydown.up.prevent="up1(1)" @blur="blurr()">
<ul class="list-group">
<li class="list-group-item " v-for="(value1,index) in arr[1]" :class="{active:index==now}" @click="open1(index,1)">{{value1}}</li>
</ul>
</div>
<div class="form-group">
<label for="s360">360</label>
<input type="text" id="s360" v-model="da[2]" class="form-control" @keyup="get($event,2)" @keydown.down.prevent="down1(2)" @keydown.up.prevent="up1(2)"  @blur="blurr()">
<ul class="list-group">
<li class="list-group-item " v-for="(item,index) in arr[2]" :class="{active:index==now}" @click="open1(index,2)">{{item}}</li>
</ul>
</div>
<div class="form-group">
<label for="zifu">知乎</label>
<input type="text" id="zifu" v-model="da[3]" class="form-control">
<ul class="list-group">
<li class="list-group-item">1</li>
</ul>
</div>
</form>
</div>
<script>
shoushuo('.container');
function shoushuo (el){
new Vue({
el:el,
data:{
arr:[[],[],[],[]],
da:['','','',''],
now:-1,
jsonpa:['https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su','https://www.sogou.com/suggnew/ajajjson','https://sug.so.360.cn/suggest'],
open:['https://www.baidu.com/s?wd=','https://www.sogou.com/web?query=','https://www.so.com/s?q=']
},
methods:{
get:function(e,ind){
if(e.keyCode==38||e.keyCode==40)return;

if(e.keyCode==13){
window.open(this.open[ind]+this.da[ind]);
this.da=['','','',''];
this.now=-1;
}
if(ind==0){
this.$http.jsonp(this.jsonpa[ind],{
wd:this.da[ind]
},{
jsonp:'cb'

}).then(function(res){
this.arr[ind]=res.data.s;
},function(){

});
}else if(ind==1){
this.$http.jsonp(this.jsonpa[ind]+'key='+this.da[ind]+'&type=web',{

},{
jsonp:'suid'

}).then(function(res){
alert(res.data.s);
this.arr[ind]=res.data.s;
},function(){

});
}else if(ind==2){
this.$http.jsonp(this.jsonpa[ind],{
word:this.da[ind]
},{}).then(function(res){
this.arr[ind]=res.data.s;
},function(){});}
if(this.da[ind]==''){
this.arr=[[],[],[],[]];
this.now=-1;
}

},
down1:function(ind){

this.now++;
if(this.now==this.arr[ind].length-1){
this.now=-1;
}
this.da[ind]=this.arr[ind][this.now];
},
up1:function(ind){

this.now--;
if(this.now==-2){
this.now=this.arr[ind].length-1;
}
this.da[ind]=this.arr[ind][this.now];
},
open1:function(index,ind){

window.open(this.open[ind]+this.arr[ind][index]);
this.da=['','','',''];
this.arr=[[],[],[],[]];
this.now=-1;
},
blurr:function(){
this.da=['','','',''];
this.arr=[[],[],[],[]];
this.now=-1;
}
}
})
}
</script>
</body>
</html>

今天学习了跨域请求，用这个做了个搜索引擎页面，目前只完成了百度和360的搜狗目前没有找到跨域请求的地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue javascript

相关文章推荐

新的分享

章节导航