之前一直不了解 jsonp 是怎么使用的娇斩，工作之余研究了一下夹囚，常用的三種方式纵刘。
- 原生 js
- jQuery
- vue
注意： jsonp 只能是 get 請求；
一荸哟、 使用原生 js 實現(xiàn) jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生js中jsonp請求</title>
</head>
<body>
<div id="box">
<input type="text" placeholder="請輸入搜索內(nèi)容" 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 加載的資源假哎，服務(wù)端返回的一個方法瞬捕，方法傳的參數(shù)就是需要的數(shù)據(jù)
function cbFn(data){
console.log('回調(diào)'+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>
步驟：
- 監(jiān)聽input 輸入框的值改變；
- 創(chuàng)建script 標簽舵抹，設(shè)置 src 的指向肪虎，其中 wd的值是請求的參數(shù)，cb的值 是設(shè)置的回調(diào)函數(shù)名稱惧蛹；
- 將 script 標簽插入到 DOM 中扇救；
- 請求成功后cbFn會執(zhí)行，數(shù)據(jù)成功打酉闵ぁ迅腔；
二、 使用jQuery 實現(xiàn) jsonp 跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax jsonp 請求</title>
</head>
<body>
<div id="box">
<input type="text" placeholder="請輸入搜索內(nèi)容" 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', //指定服務(wù)器返回的數(shù)據(jù)類型
jsonp: 'cb', // 傳遞給請求處理程序或頁面的靠娱，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認為:callback)
jsonpCallback: 'sug', //指定回調(diào)函數(shù)名稱
success: function (data) {
console.log(data)
var result = JSON.stringify(data) //json對象轉(zhuǎn)成字符串
$('#text').text(result)
},
error:function (error) {
console.log(error)
}
})
})
})
</script>
</body>
</html>
步驟：
- 監(jiān)聽 input 值改變沧烈；
- 使用 jQuery發(fā)送 Ajax 請求
- 返回渲染數(shù)據(jù)
三、 使用vue 實現(xiàn) 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="請輸入搜索內(nèi)容" 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 監(jiān)聽input 的值改變像云，發(fā)送請求掺出。
- 返回數(shù)據(jù)渲染；
OK 大功告成苫费！
github源碼地址
