原生JavaScript代码实现 jsonp 跨域请求

最新推荐文章于 2025-06-26 16:56:30 发布

monoplasty

最新推荐文章于 2025-06-26 16:56:30 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jsonp

本文链接：https://blog.youkuaiyun.com/monoplasty/article/details/79458127

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JSONP技术实现简易百度搜索建议的方法。通过HTML、CSS和JavaScript的结合，能够实现在输入框中输入关键词时即时显示百度搜索建议的功能。此示例代码展示了如何创建一个具有实时反馈效果的搜索框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp简单实现百度搜索功能代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        #q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
        #ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
        li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
        li a:hover{ background: #f90; color: white; }
    </style>
    <script>
        // 名字自定义的回调函数 处理获取到的数据
        function callback(data) {
            var show = document.getElementById('show');
            var html = "";
            if(data.s.length) {
                show.style.display = 'block';
                var len = data.s.length;
                for (var i=0; i<len; i++) {
                    html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
                }
                show.innerHTML = html;
            }else{
                show.style.display = "none";
            }
        }

        window.onload = function(){
            var oQ = document.getElementById('q'),
                show = document.getElementById('show');

            oQ.onkeyup = function(){
                if(this.value!=""){
                    var oScript = document.createElement("script");
                    // callback 为自定义的函数名字
                    oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=callback';
                    document.body.appendChild(oScript);
                } else{
                    show.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="q">
    <ul id="show"></ul>
</body>
</html>