请选择
进入手机版
|
继续访问电脑版
设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
本版
帖子
自丢网
»
社区论坛
›
建站程序/IT教程
›
JavaScript教程
›
如何通过ajax实现百度搜索输入动态获取数据方法教程 ...
返回列表
发新帖
如何通过ajax实现百度搜索输入动态获取数据方法教程
[复制链接]
1498
|
0
|
2020-11-12 21:53
|
显示全部楼层
|
阅读模式
如何通过ajax实现百度搜索输入动态获取数据方法教程
这里简单的利用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>
复制代码
欢迎测试,本人亲测没问题。
ajax教程
,
获取百度搜索动态
,
获取百度搜索数据
回复
举报
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
admin
UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24
加好友
发消息
回复楼主
返回列表
源码下载
Thinkphp教程
修罗xiuno教程
Discuz教程
zzz资源/教程
织梦教程
服务器教程
数据库教程
Html/Html5教程
JavaScript教程
Css/Css3教程
建站/web前端教程
PHP教程
其他编程教程
小程序app教程
PPT模板/素材
Word简历模板/素材
Excel模板/素材
素材中心
百科知识
图文推荐
html+js实现本站已运行运营多少天代码
2024-2-8 09:19
2024年最新ThinkPHP8.x 讲义代码SQL,实战部分结合四种前端教程
2024-1-23 09:25
小学生必背古诗75首-标注-翻译-A4可打印word版本下载
2024-1-23 09:18
长截图 截动图gif制作 贴图软件免费下载
2024-1-22 10:45
D盾_防火墙 版本: v2.1.8.1最新绿色免安装版本扫木马病毒
2024-1-22 08:27
热门排行
1
修罗轻论坛程序Xiuno免费开源+收费插件模板风格大全 价值1200元 百度云网盘下载
2
仿看雪论坛模板风格 for 修罗模板 支持4.0以上版本
3
【专业商业版】积分插件 v1.25 for xiuno修罗插件
4
修罗程序添加水印插件 for xiuno插件 支持4.0以上版本
5
邀请注册、用户消费购买邀请码 for 修罗插件 支持xiuno4.0以上版本
6
分类/标签(TAG) - 增强版 v2.5 for xiuno插件 支持4.0以上版本
7
tStore积分商城插件 v1.03 for 修罗插件 xiuno4.0以上版本
8
UMEditor 百度编辑器 v2.6 for 修罗插件xiuno 支持4.0以上版本