jsonp实践
2018-08-10 本文已影响6人
dreamruner
什么是Jsonp
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
案例
借用了百度的关键字搜索联想,完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt1">
<ul id="ul1">
</ul>
<script>
let oTxt = document.getElementById('txt1');
let oUl = document.getElementById('ul1');
function show(obj) {
console.log(obj);
oUl.innerHTML = '';
obj.s.forEach(it=>{
let oLi = document.createElement('li');
oLi.innerHTML = it;
oUl.appendChild(oLi);
})
}
oTxt.oninput = function () {
let script = document.createElement('script');
script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;
document.head.appendChild(script);
};
</script>
</body>
</html>
