您的位置：首页 > Web前端 > JavaScript

用AJAX,JSON在百度搜索栏内获取联想关键字

2015-12-17 17:44 741 查看

<!DOCTYPE HTML >
<html>
<head>
<title> 百度一下，你就知道 </title>
<meta charset="utf-8">
<style type="text/css">
.nav{
margin-top:20px;
text-align:right;

}
.nav a{
font-size:13px;
font-weight:bold;
color:black;
}
.nav .light{
font-weight:normal;
}
.nav .more{
font-size:13px;
color:white;
background-color:#3385ff;
display:inline-block;
width:60px;
height:23px;
padding:3px;
text-align:center;
line-height:23px;
}
.lg{
margin-top:15px;
text-align:center;
}
.lg img{
width:270px;
height:129px;

}
.srch{
width:643px;
margin:50px auto;
text-align:center;
margin-top:22px;
}
.srch .ipt{
height:30px;
width:539px;
float:left;

outline:medium;
}
.srch .btn{
height:36px;
width:100px;
background-color:#3385ff;
border:none;
color:white;
font-size:14px;
float:left;

}
.ept{
height:240px;
}
.about{
text-align:center;
font-size:11px;
margin-bottom:10px;
}
.about a{
color:blue;
}
.cp p{
text-align:center;
font:12px arial;
color:gray;
}
.cp p a{
font:12px;
color:gray;
}
.cp p .icon{
width: 14px;
height: 17px;
display: inline-block;
overflow: hidden;
background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_45de3f02.png) no-repeat;
background-position: -600px -96px;
position: relative;
top: 3px;
}
#ul{
list-style: none;
border:1px solid gray;
width: 541px;
padding: 0;//消除ul列表默认的左内边距
}
#ul li{
/*width: 539px;*/
margin-left: 0;
text-align: left;
}

</style>
</head>

<body>
<div class="nav">
<a href="">新闻</a> 
<a href="">hao123</a> 
<a href="">地图</a> 
<a href="">视频</a> 
<a href="">贴吧</a> 
<a href="" class="light">登录</a> 
<a href="" class="light">设置</a> 
<span class="more">更多产品</span> 
</div>
<div class="lg">
<img src="logo1.png" alt="百度logo">
</div>
<div class="srch">
<input type="text" class="ipt" id="inpt" /><input type="button" value="百度一下" class="btn" />
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="ept"></div>
<div class="about">
<a href="">把百度设为首页</a> 
<a href="">关于百度</a> 
<a href="">About Baidu</a>
</div>
<div class="cp">
<p>©2015 Baidu
<a href="">使用百度前必读</a>
<a href="">意见反馈</a> 京ICP证030173号<i class="icon"></i>
</p>
</div>

<script>
var oInpt = document.getElementById("inpt");
var oLi = document.getElementsByTagName('li');

<span style="white-space:pre">	</span>//使用oninput事件，输入内容后立即触发
oInpt.oninput = function(){
var xhr = new XMLHttpRequest();
xhr.open("GET","http://180.76.185.227/php/baidu.php?keyword=" + oInpt.value,true);
xhr.send(null);
xhr.onload = function(){
var obj = JSON.parse(xhr.responseText);//把获取的字符串转换成<u><span style="color:#ff0000;">JSON对象</span></u>
console.log(obj.s);   //查看可看到对象中有属性s是包含10个关联词的数组，用obj.s获取到数组的内容
for (var i = 0; i < obj.s.length; i++) { //用for循环遍历li列表一次把数组中的值打印对应的li标签内
oLi[i].innerHTML = obj.s[i];
};
}

}
//用两个for循环做出鼠标移入li标签上自动改变背景色的效果
for (var i = 0; i < oLi.length; i++) {

oLi[i].onmouseover = function(){
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "";
};
this.style.background = "gray";
}
};

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航