<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp封装</title>
</head>
<body>
<input type="text" id="target">
<script>
function myHandle(data) {
console.log(data)
}
//封装的jsonp函数（url为传入的地址，data为参数对象，callback为回调函数）
function myJsonp(url,data , callback) {
let params = '';
url +=url.indexOf('?') > -1 ? '&': '?';
for(var key in data) {
params+='&'+key +'='+ data[key];
}
url+=params;
//cb为百度后端回调函数的键名，后面接上你的回调函数名
url+='&'+'cb='+callback
let script = document.createElement('script')
script.setAttribute('src', url)
document.body.appendChild(script);
document.body.removeChild(script);
}
//当页面加载完毕，调用函数
window.onload = function(){
//获取元素
var target= document.getElementById('target');
//当键盘抬起时触发jsonp函数
target.onkeyup = function(){
let value = target.value.trim()
if(!value) return;
// 调用封装的jsonp函数
myJsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
"wd":value},'myHandle')
};
};
</script>
</body>
</html>
总结： 调用的jsonp函数，返回的是一段js代码，就是callback函数的调用，参数为服务器返回的数据
上面的函数返回的是myHandle(data),data为服务器返回的数据
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
