JS呼叫百度api介面——實現簡單的百度頁面
阿新 • • 發佈：2019-01-08
描述：
JS呼叫百度api介面——實現簡單的百度頁面
效果：
實現：
css檔案：
@charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; list-style: none; } .ss{ border: 1px solid #000000; } .ss li { /*border-bottom: 1px solid #999999;*/ padding: 10px 20px; text-align: left; } .ss li:hover{ background-color:#e2e2e2; cursor: pointer; } #top { float: right; } #top li{ padding:10px; float: left; } #top a { color: #000000; font-size: 14px; font-weight: 600; } #top a:hover{color:#0A09BE} #img_baidu { height: 150px; clear: both; display: block; margin: 0 auto; background: #FFFFFF; } #text_baidu { width: 680px; margin: 36px auto; position: relative; background: #FFFFFF; } #texts{ width: 558px; height: 38px; left: 0; position: absolute; border: blue 1px solid; } #sub{ width:120px; height: 40px; top: 0; right: 0; position: absolute; background:#467EE9; color: #FFFFFF; border-style: none; font-size: 16px; } #end { text-align: center; position: absolute; left: 0; right: 0; bottom: 100px; color: #9d9d9d; font-size: 12px; height: 80px; background: #FFFFFF; } #end p { color: #000000; font-size: 14px; } #end a { color: #9d9d9d; font-size: 12px; }
html檔案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/bd.css"/> <!--<script src="http://localhost:80/js/Method.js"></script>--> </head> <body> <br> <div id="top" > <ul> <li> <a href="#">新聞 </a></li> <li> <a href="#">hao123 </a></li> <li> <a href="#">地圖 </a></li> <li> <a href="#">視訊 </a></li> <li> <a href="#">貼吧 </a></li> <li> <a href="#">學術 </a></li> <li> <a href="#">登入 </a></li> <li> <a href="#">設定 </a></li> <li> <a href="#">更多產品 </a></li> </ul> </div> <img src="images/bd_logo1.png" id="img_baidu"> <div id="text_baidu"> <form method="post" action="" name="bd"> <input type="text" id="texts"> <input type="button" value="百度一下" id="sub" > </form> </div> <div id="end"> <div> <img src="images/zbios_efde696.png" width="60px"> <p>百度</p> </div> <div> <a href="#">把百度設為主頁 </a> <a href="#">關於百度 </a> <a href="#">About Baidu</a> <a href="#">百度推廣</a> <br> ©2018 Baidu <a href="#">使用百度前必讀 </a> <a href="#">意見反饋 </a> 京ICP證030173號 <a href="#">京公網安備11000002000001號</a> </div> </div> <script> /* * 1、cors * 2、jsonp解決 * 3、websocket解決（不講解） * （做一個本地服務，這個本地服務訪問跨域服務通訊，然後再傳給本地）中間介質跨域 * * * */ // Method.$c("div",document.body); var script,ul,textSub; var texts=document.getElementById("texts"); var textSub=document.getElementById("sub"); texts.addEventListener("input",inputHandler); textSub.addEventListener("click",subClickHandler); function inputHandler(e) { search(texts.value); } function search(searchStr) { if(script){ script.remove(); script=null; } script=document.createElement("script");//百度API script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+searchStr+"&json" + "=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback"; document.body.appendChild(script); } function callback(obj) { if(ul){ ul.remove(); ul=null; } ul=document.createElement("ul"); ul.className="ss"; ul.style.width=texts.clientWidth+"px"; for(var i=0;i<6;i++){//搜素框內有幾個資料 var li=document.createElement("li"); li.textContent=obj.s[i]; li.addEventListener("click",clickHandler); ul.appendChild(li); } ul.firstElementChild.style="padding-top:50px";//第一個顯示出來 texts.parentElement.insertBefore(ul,texts.nextElementSibling); } function clickHandler(e) {//百度API location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd=" +this.textContent+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195"; } function subClickHandler(e) {//百度API location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd=" +texts.value+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195"; } </script> </body> </html>