jsonp实践原生js实现百度联想词

最新推荐文章于 2024-07-09 23:44:56 发布

续木

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量147

点赞数

分类专栏： JavaScript 文章标签：前端原生js JavaScript

本文链接：https://blog.csdn.net/weixin_45681557/article/details/101776639

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

所谓jsonp，就是利用script的src属性跨域访问，可用于解决主流浏览器的跨域数据访问的问题；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        .wrapper {
            margin: 100px;
        }

        input {
            width: 400px;
            height: 34px;
        }

        ul {
            display: none;
            width: 400px;
            border: 1px solid D#ccc;
        }

        li {
            margin: 5px;
        }

        li:hover {
            background: #ddd;
        }

        a {
            color: #999;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="text" id="btn">
        <ul></ul>
    </div>
    <script>
        var oInput = document.getElementsByTagName('input')[0];
        var oUl = document.getElementsByTagName('ul')[0];
        oInput.oninput = function () {
            var value = this.value;
            // console.log(value);
        }
        btn.oninput = function () {
            var value = this.value;
            // console.log(value);
            var oScript = document.createElement('script');
            oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa';
            document.body.appendChild(oScript)
        }

        function aa(data) {
            console.log(data);
            oUl.style.display = 'block';
            var s = data.s;
            var str = '';
            if (s.length > 0) {
                s.forEach(function (ele, index) {
                    str += '<li><a href="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</a></li>';
                })
                oUl.innerHTML = str;
            } else {
                oUl.style.display = 'none';
            }
        }
    </script>
    </body>

    </html>

续木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp实践原生js实现百度联想词

基于jsonp的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫