ajax实现百度搜索输入动态获取数据

最新推荐文章于 2022-09-27 19:44:06 发布

原创最新推荐文章于 2022-09-27 19:44:06 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

1 篇文章

订阅专栏

这篇博客通过Ajax技术实现在输入框中输入时，动态从服务器获取并展示数据，模仿百度搜索的功能。主要涉及HTML页面布局、样式设计及JavaScript代码实现。

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

这里简单的利用ajax原理来模拟百度的搜索，实现边输入边动态的获取服务器的数据。

1、HTML页面布局

<html>
     <head>
    <meta charset="UTF-8">
    <title></title>
      </head>
     <body>
         <input type="text" name="txt" id="txt" value="" />
         <ul id="ul">
         </ul>
      </body>
</html>

2、style样式页面

<style>
input{
    width: 300px;
    height: 30px;
}
ul{
    list-style: none;
    width: 300px;   
    padding: 0;
    margin:0;
    border: 1px solid #ccc;     
    display: none;          
    }
ul li{
    list-style: none;
    width: 300px;
    height: 30px;
    line-height: 30px;      
    }
ul li a{
    display: block;
    color: #333;
    text-decoration: none;
}
ul li a:hover{
    background: #ccc;
}
</style>

3、javascript代码

<script>
function fn(data){
    console.log(data)
    var oUl=document.getElementById('ul');
    var arr=data.s;         
    var html="";
    for(var i=0;i<arr.length;i++){              
    html+='<li><a href="https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd='+arr[i]+'" target="_blank">'+arr[i]+'</a></li>';
    }
    oUl.innerHTML=html;
}
</script>
<script>
    window.onload=function(){
    var oUl=document.getElementById('ul');
    var oTxt=document.getElementById('txt');
    var oHead=document.getElementsByTagName('head')[0];
    oTxt.onkeyup=function(){    
    var oS=document.createElement('script');//动态添加script标签
    oS.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+oTxt.value+'&cb=fn';//从百度获取的接口数据
    oHead.appendChild(oS);
    if(oTxt.value!=''){ 
        oUl.style.display='block';
    }else{
        oUl.style.display='none';
        }
    }

}
</script>