运用js跨域实现百度搜索

最新推荐文章于 2023-08-30 16:13:14 发布

城南花开ze

最新推荐文章于 2023-08-30 16:13:14 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： js 跨域访问 js实现跨域访问百度搜索

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/93414898

Javascript 专栏收录该内容

111 篇文章

订阅专栏

该博客围绕跨域访问百度搜索展开。需求是设计搜索框，输入内容点击按钮可搜索。设计思路为封装跨域访问函数，获取文本框内容并绑定该函数，点击时执行跨域访问，显示百度搜索结果，还给出了实现代码。

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

需求分析：设计一个搜索框，当在文本框中输入内容的时候，点击按钮就可以进行搜索，跨域访问百度的搜索
设计思路：封装跨域访问函数，获取文本框元素的内容，绑定跨域访问函数，当点击执行的时候就会执行跨域访问，将搜索的结果显示为百度的搜索数据
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
</head>
<body>

<input type="text" id="q" placeholder="请输入要搜索的内容">
<button id="btn">搜索</button>
<ul id="list">

</ul>

</body>
<script>

function fn(data){

    var ul = document.getElementById("list");
    var html = "";
    if(data.s.length){
        ul.style.display = "block";
        for(var i=0;i<data.s.length;i++){
            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+ '">'+ data.s[i]+'</a></li>';
           // html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
        }
        ul.innerHTML = html;
    }else{
        ul.style.display = "none";
    }
}


let q = document.getElementById("q");
q.onkeyup = function(){
    if(this.value != ''){
        var script = document.createElement("script");
        script.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
        document.body.appendChild(script);
    }else{
        ul.style.display = "none";
    }
}


</script>
</html>