跨域请求vue和vue－resource

来源：互联网发布：虚拟币系统源码编辑：程序博客网时间：2024/06/04 18:19
<!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的搜狗目前没有找到跨域请求的地址
阅读全文
0 0