jsonp跨域请求
一、JSONP
jsonp
请求方式:get
跨域:可以
使用条件:1.跨域 2.有一个参数是回调!
例如:http://suggestion.baidu.com/su?cb=callback&wd=123
使用:
1.创建一个script标签 var os=document.createElement("script")
2.给script一个src os.src="url";
3.把script标签插入到页面 document.body.appendChild(os)
4.在回调函数里面处理数据
ajax
请求方式:get post
跨域:不能
使用jsonp条件:
1.跨域
2.有一个参数需要是回调函数,大部分情况下叫cb |callback
ajax 不能跨域 get post
jsonp 可以跨域 get
使用jsonp方法:
1.创建一个script标签
var os=document.createElement("script")
2.给他src
os.src="url"
3.插入到页面
document.body.appendChild(os)
4.回调函数中处理数据
使用:jsonp+watch 百度 翻译
例1.百度
<style>
.select {
background: #333333;
color: #ffffff;
}
</style>
<div id="app">
<input type="text" v-model="kw" @keydown.down="down" @keydown.up.prevent="up" @keydown.enter="enter">
<ul>
<li v-for="(item,index) in arr" :key="item" v-if="4>index" :class="[index==n?'select':'']">{{item}}</li>
</ul>
</div>
<script>
// http://suggestion.baidu.com/su?cb=callback&wd=123
var vm = new Vue({
el: "#app",
data: {
kw: "",//关键字
arr: [],
n: -1
},
methods: {
//下键
down() {
this.n++
if (this.n >= 4) {
this.n = -1
}
},
//上键
up() {
this.n--;
if (this.n <= -1) {
this.n = 4
}
},
//回车
enter() {
if (this.n >= 0 && this.n <= 9) {
window.open("https://www.baidu.com/s?wd=" + this.arr[this.n])
} else {
window.open("https://www.baidu.com/s?wd=" + this.kw)
}
}
},
watch: {
kw() {
if (this.kw != "") {
var os = document.createElement("script")
os.src = "http://suggestion.baidu.com/su?cb=aaa&wd=" + this.kw
document.body.appendChild(os)
}else{
this.arr=[]
}
}
}
})
function aaa(d) {
vm.arr = d.s
}
</script>
例2:翻译
<div id="app">
<textarea cols="30" rows="10" v-model="kw"></textarea>
<div>翻译结果:{{msg}}</div>
</div>
<script>
var vm= new Vue({
el:"#app",
data:{
kw:"",//要翻译的内容
msg:""
},
watch:{
kw(){
if(this.kw==""){
this.msg=""
return;
}
var os=document.createElement("script")
os.src="https://api.asilu.com/fanyi?callback=cb&q="+this.kw+"&type=&_1501665233671"
document.body.appendChild(os)
}
}
})
function cb(d){
vm.msg=d.data
}
</script>