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

最新推荐文章于 2024-04-22 17:39:51 发布

qq_33372815

最新推荐文章于 2024-04-22 17:39:51 发布

阅读量2.5k

点赞数 2

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_33372815/article/details/72625776

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里简单的利用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>

qq_33372815

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ajax实现百度搜索输入动态获取数据

这里简单的利用ajax原理来模拟百度的搜索，实现边输入边动态的获取服务器的数据。1、HTML页面布局<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="txt" id="txt" value="" />
复制链接

扫一扫