jsonp实践

什么是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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容