快崩溃了 setContent(contents) 中alert(contents)有值,而size却是undefined,怎么回事呢??

来源:2-7 前后台程序联调

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>


写回答 关注

1回答

  • 幕布斯4588983
    2017-11-02 10:54:47
    已采纳

    var size = contents.lenght;    你的length写错了

    幕布斯458... 回复qq_慕慕粉

    不客气

    2017-11-03 10:10:44

    共 2 条回复 >

Servlet+Ajax实现搜索框智能提示

Java实现搜索框智能提示,熟练掌握使用Servlet和Ajax

37805 学习 · 146 问题

查看课程

相似问题