jsonp跨域访问案例

最新推荐文章于 2022-07-21 22:03:45 发布

诸葛苍穹

最新推荐文章于 2022-07-21 22:03:45 发布

阅读量245

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u012260672/article/details/52964099

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        form{
            width: 500px;
            border: 1px solid #f89406;
            margin: 0 auto;
            padding: 10px;
        }
        input{
            width: 100%;
            height:30px;
        }
        #content{
            border:1px solid #f90; width: 100%; margin: 0;padding: 0; display: none;list-style-type: none;
        }
        #content li a {
            line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;
        }
        #content li a:hover {
            background: #f90;
            color: white;
        }
    </style>
</head>
<body>

<form action="" method="get">
    <input type="text" id="search">
    <ul id="content"></ul>
</form>

</body>
</html>

<script>

    var search = document.getElementById('search');
    var content = document.getElementById('content');

    search.onkeyup = function () {
        if (null !== this.value){
            //创建script标签
            var oScript = document.createElement('script');
            oScript.src= 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=supeMapJson';
            document.body.appendChild(oScript);
            content.style.display = 'display';
        }else {
            content.style.display = 'none';
        }
    }

    function supeMapJson(data) {
        data.p = true;
        var html = '';
        if (data.s.length){
            for (var i =0;i < data.s.length; i++){
                html += '<li><a href="http://www.baidu.com/s?wd='+encodeURI(data.s[i])+'">'+data.s[i]+'</a></li>';
            }
            content.innerHTML = html;
            content.style.display = 'block';
        }else {
            content.style.display = 'none';
        }
    }
</script>