<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html> <head> <style type="text/css"> #mydiv{ position:absolute; left:50%; top:50%; margin-left:-200px; margin-top;-50px; } </style> <script type="text/javascript"> //获得用户输入内容的关联信息的函数 function getMoreContents(){ var xmlHttp; //首先要获得用户的输入 var content=document.getElementById("keyword"); if(content.value==""){ return; } //然后要给服务器发送用户输入的内容，因为我们采用的是ajax异步发送数据 //所以我们要是有一个对象，叫做XmlHttp对象 xmlHttp=createXMLHttp(); //创建完之后，我们需要向服务器发送数据 //escape不加的话就中文有问题 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; //因为我们已经在url中已经写好参数的 xmlHttp.send(null); } function createXMLHttp(){ //对于大多数的浏览器都适用 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } //要考虑浏览器的兼容性 if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp){ xmlHttp=new ActiveXObject("Msxm2.XMLHTTP"); } } return xmlHttp; } //回调函数 function callback(){ //4代表完成 if(xmlHttp.readyState==4){ //这个200代表是响应成功，404代表资源部存在，500代表服务器内部错误 if(xmlHttp.status==200){ //这是交互成功，获得相应的数据，这是文本格式 var result=xmlHttp.responseText; //解析获得 的数据 var json=eval("("+result+")"); //获得数据之后，就可以动态的显示这些数据了，把这些数据展示到输入框的下面 //alert(json); setContent(json); } } } //设置关联数据的展示，参数代表的是服务器传递过来的关联数据 function setContent(contens){ //首先获得管理数据的长度以此来确定生成多少<tr></tr> var size=contents.length; //设置内容 for(var i=0;i<size;i++){ var nextNode=contens[i];//代表的是json格式数据的第i个元素 var tr=document.createElement("tr"); var td=document.createElement("td"); td.setAttribute("border","0"); td.setAttribute("bgcolor","#FFFAFA"); td.onmouseover=function(){ this.className='mouseOver'; }; td.onmouseout=function(){ this.className='mouseout'; }; td.onclick=function(){ //这个方法实现的是，当用鼠标点击一个关联的数据时，自动设置为输入框的数据 }; var text=document.createTede(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").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_table_body"> </tbody> </table> </div> </div> </body></html>
1 回答
已采纳
拟人
TA贡献37条经验 获得超15个赞
别用eval()这种方式解析json字符串。
js里有自带的json解析，JSON.parse();
如：var j = JSON.parse('{"a":1}')，
你先输出你后台传过来的那个json字符串，看json格式是不是对的，注意json对象的键值对里键应该是双引号包裹的，
我大胆猜测你后台传入前台的json字符串格式有问题，可能原因是你后台处理json字符串里键的双引号没有转义导致的，建议\"这样转义下试试
添加回答
举报
0/150
提交
取消