三种方式使用 jsonp 实现跨域
2018-05-10 本文已影响24人
刘挚珂
之前一直不了解 jsonp 是怎么使用的，工作之余研究了一下，常用的三种方式。
- 原生 js
- jQuery
- vue
注意： jsonp 只能是 get 请求；
一、 使用原生 js 实现 jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生js中jsonp请求</title>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入搜索内容" id="input" onchange="changeValFn(this)">
<p id="text"></p>
</div>
<script type="text/javascript">
var boxEl = document.getElementById('box')
var textEl = document.getElementById('text')
// script 标签中 src 加载的资源，服务端返回的一个方法，方法传的参数就是需要的数据
function cbFn(data){
console.log('回调'+JSON.stringify(data));
textEl.innerText = JSON.stringify(data)
}
// input 值改变
function changeValFn(ev){
var data = ev.value
var scriptEl = document.createElement('script')
console.log('ev_'+ev.value);
scriptEl.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+data+'&cb=cbFn'
boxEl.appendChild(scriptEl)
}
</script>
</body>
</html>
步骤：
- 监听input 输入框的值改变；
- 创建script 标签，设置 src 的指向，其中 wd的值是请求的参数，cb的值 是设置的回调函数名称；
- 将 script 标签插入到 DOM 中；
- 请求成功后cbFn会执行，数据成功打印；
二、 使用jQuery 实现 jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax jsonp 请求</title>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入搜索内容" id="input">
<p id="text"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#input').on('change', function () {
var data = $(this).val()
$.ajax({
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
type: 'GET',
data: {wd: data},
dataType: 'jsonp', //指定服务器返回的数据类型
jsonp: 'cb', // 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: 'sug', //指定回调函数名称
success: function (data) {
console.log(data)
var result = JSON.stringify(data) //json对象转成字符串
$('#text').text(result)
},
error:function (error) {
console.log(error)
}
})
})
})
</script>
</body>
</html>
步骤：
- 监听 input 值改变；
- 使用 jQuery发送 Ajax 请求
- 返回渲染数据
三、 使用vue 实现 jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue jsonp 请求</title>
<script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入搜索内容" v-model='inputText'>
<ul>
<li v-if="result" v-for="(item, index) in result">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
new Vue({
el: '#box',
data: {
inputText: '',
text: '',
nowIndex: -1,
result: []
},
watch:{
inputText:function (newVal) {
const that = this
if(!newVal){
that.result = []
return false
}
that.getData()
}
},
methods: {
getData: function() {
const that = this
that.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: that.inputText
},
jsonp: 'cb'
}).then(function (value) {
that.result = value
})
}
}
})
}
</script>
</body>
</html>
步骤：
- watch 监听input 的值改变，发送请求。
- 返回数据渲染；
OK 大功告成！
github源码地址
