qq_慕慕粉
2017-10-31 14:43
<script type="text/javascript">
var xmlHttp;
function getMoreContents() {
//1.首先要获得用户的输入
var content = document.getElementById("keyword");
if (content.value == "") {
return;
}
/* alert(content.value); */
/* 2.要把用户输入的内容发送给服务器
需要采用ajax异步发送数据所以我们要使用一个叫xmlHttp对象
*/
xmlHttp = createXMLHttp();
//alert(xmlHttp);
//要给服务器发送数据,需要一个地址
var url = "search?keyword=" + escape(content.value);
//请求方式;请求地址;true表示javascript脚本会在send()方法之后继续执行,
//而不会等待来自服务器的响应
xmlHttp.open("GET", url, true);
//xmlHttp绑定回调方法会在xmlHttp状态改变时被调用
//xmlHttp的状态0-4种,我们只关心4这种状态(4表示完成),因为当数据
//传输的过程完成之后,在调用回调方法才有意义。
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//获得xmlHttp对象
function createXMLHttp() {
//对于大多数浏览器都是用
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXObject("Microsoft2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback() {
//4代表完成
if (xmlHttp.readyState == 4) {
//200:服务器响应成功
if (xmlHttp.status == 200) {
//交互成功,获得相应数据,是文本格式
var result = xmlHttp.responseText;
//获得解析的数据
var json = eval("(" + result + ")");
//获得数据之后,就可以动态的显示这些数据了,把这些数据展示到
//输入框下面
alert(json);
setContent(json);
}
}
}
//设置关联数据的展示,参数代表的服务器传递过来关联数据
function setContent(contents) {
alert(contents);
//首先获得关联数据的长度,以此来获取生成多少<tr>
var size = contents.lenght;
alert(size);
//设置内容
for (var i = 0; i < size; i++) {
//代表的是json格式数据的第i个数据
//????????
var nextNode = contents[i];
//循环一个tr
var tr = document.createElement("tr");
//循环一个td
var td = document.createElement("td");
//设置td的样式
td.setAttribute("border", "0");
td.setAttribute("bgcolor", "#FFFAFA");
//当鼠标滑过时的样式
td.onmouseover = function() {
this.className = 'mouseOver';
};
//当鼠标出去时的样式
td.onmouseout = function() {
this.className = 'mouseOut';
};
//当鼠标点击下拉框中的相关联的信息时,关联信息自动设置到搜索框中;
td.onclick = function() {
}
//把文本放进td;把td放进tr;把tr放进tbody
var text = document.createTextNode(nextNode);
td.append(text);
tr.append(td);
document.getElementById("content_tbody").appendChild(tr);
}
}
</script>
</head>
<body>
<div id="mydiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()">
<input type="button" value="百度一下" width="50px">
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="0"
cellspacing="0" cellpadding="0">
<tbody id="content_tbody">
</tbody>
</table>
</div>
</div>
</body>
</html>
var size = contents.lenght; 你的length写错了
Servlet+Ajax实现搜索框智能提示
37805 学习 · 146 问题
相似问题