在自己的项目里调用百度接口，实现百度搜索
一、原理
百度使用的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是之前写的，注释比较少，春节开工后写详细的注释，每一篇文章都会维护起来的，现在先实现功能，逻辑比较简单大家一看就懂。新年快乐。
相关推荐
rojyang 2020-05-20
ELEMENTS爱乐小超 2020-05-07
baynkbtg 2019-11-02
ksjlhy 2019-10-28
geminihr 2015-03-19
chang00 2015-06-17
LinSeeker 2019-09-07
nextwhy 2012-09-09
tongjianru 2011-05-18
Jarvan 2016-09-25
fadacai0 2016-04-18
deusrwvf 2017-06-21
AIOps智能运维 2015-05-25
magvwiz 2013-10-18
AIOps智能运维 2010-08-17
linqiang 2010-02-04
XSxing 2019-06-30