在本身的项目里挪用百度接口，完成百度搜刮

2019年8月24日 138次阅读 来源: 李俊杰

一、道理

百度运用的jsonp接口，根据jsonp的要领即可完成百度搜刮的功用。

二、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                padding: 50px;
            }
            input{
                width: 300px;
            }
            ul{
                width: 300px;
                border: 1px solid #FF69B4;
                display: none;
            }
            li{
                list-style: none;
            }
            li a:hover{
                color: hotpink;
                
            }
        </style>
    </head>
    
    <body>
        <input type="text" id="q" />
        <ul id="ul1"></ul>
        <script type="text/javascript">
            function baidudata(data){
                var oUl=document.getElementById('ul1')
                var html='';
                if(data.s.length){
                    oUl.style.display = 'block';
                    for(var i=0;i<data.s.length;i++){
                        html+='<li><a href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
                    }
                    oUl.innerHTML=html;
                }else{
                    oUl.style.display='none'
                }
            }
            window.onload=function(){
                var oQ=document.getElementById('q')
                var oUl=document.getElementById('ul1')
                oQ.onkeyup=function(){
                    if(this.value !=""){
                        var oScript=document.createElement('script')    
                        oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd='+this.value+'&cb=baidudata'
                        document.body.appendChild(oScript)
                    }else{
                        oUl.style.display='none'
                    }
                }
            }
        </script>
    </body>
</html>

三、总结

demo是之前写的，解释比较少，春节完工后写细致的解释，每一篇文章都邑保护起来的，现在先完成功用，逻辑比较简单人人一看就懂。新年快乐。

    原文作者：李俊杰
    原文地址: https://segmentfault.com/a/1190000013309799
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞