<%@ 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"> //獲得用戶輸入內(nèi)容的關(guān)聯(lián)信息的函數(shù) function getMoreContents(){ var xmlHttp; //首先要獲得用戶的輸入 var content=document.getElementById("keyword"); if(content.value==""){ return; } //然后要給服務(wù)器發(fā)送用戶輸入的內(nèi)容，因?yàn)槲覀儾捎玫氖莂jax異步發(fā)送數(shù)據(jù) //所以我們要是有一個(gè)對(duì)象，叫做XmlHttp對(duì)象 xmlHttp=createXMLHttp(); //創(chuàng)建完之后，我們需要向服務(wù)器發(fā)送數(shù)據(jù) //escape不加的話就中文有問題 var url="search?keyword="+escape(content.value); //true表示javascript腳本會(huì)在send（）方法之后繼續(xù)執(zhí)行，而不是等待來自服務(wù)器的相應(yīng) xmlHttp.open("GET",url,true); //xmlHttp綁定回調(diào)方法，這個(gè)回調(diào)方法會(huì)在xmlHttp狀態(tài)改變的時(shí)候被調(diào)用 //xmlHttp的狀態(tài)0-4。我們只關(guān)心4（因?yàn)?表示完成） //當(dāng)完成之后，再調(diào)用回調(diào)方法才有意義 xmlHttp.onreadystatechange=callback; //因?yàn)槲覀円呀?jīng)在url中已經(jīng)寫好參數(shù)的 xmlHttp.send(null); } function createXMLHttp(){ //對(duì)于大多數(shù)的瀏覽器都適用 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; } //回調(diào)函數(shù) function callback(){ //4代表完成 if(xmlHttp.readyState==4){ //這個(gè)200代表是響應(yīng)成功，404代表資源部存在，500代表服務(wù)器內(nèi)部錯(cuò)誤 if(xmlHttp.status==200){ //這是交互成功，獲得相應(yīng)的數(shù)據(jù)，這是文本格式 var result=xmlHttp.responseText; //解析獲得 的數(shù)據(jù) var json=eval("("+result+")"); //獲得數(shù)據(jù)之后，就可以動(dòng)態(tài)的顯示這些數(shù)據(jù)了，把這些數(shù)據(jù)展示到輸入框的下面 //alert(json); setContent(json); } } } //設(shè)置關(guān)聯(lián)數(shù)據(jù)的展示，參數(shù)代表的是服務(wù)器傳遞過來的關(guān)聯(lián)數(shù)據(jù) function setContent(contens){ //首先獲得管理數(shù)據(jù)的長(zhǎng)度以此來確定生成多少<tr></tr> var size=contents.length; //設(shè)置內(nèi)容 for(var i=0;i<size;i++){ var nextNode=contens[i];//代表的是json格式數(shù)據(jù)的第i個(gè)元素 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(){ //這個(gè)方法實(shí)現(xiàn)的是，當(dāng)用鼠標(biāo)點(diǎn)擊一個(gè)關(guān)聯(lián)的數(shù)據(jù)時(shí)，自動(dòng)設(shè)置為輸入框的數(shù)據(jù) }; 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"/>? <!-- 下面是內(nèi)容展示的區(qū)域 -->? <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貢獻(xiàn)37條經(jīng)驗(yàn) 獲得超15個(gè)贊
別用eval()這種方式解析json字符串。
js里有自帶的json解析，JSON.parse();
如：var j = JSON.parse('{"a":1}')，
你先輸出你后臺(tái)傳過來的那個(gè)json字符串，看json格式是不是對(duì)的，注意json對(duì)象的鍵值對(duì)里鍵應(yīng)該是雙引號(hào)包裹的，
我大膽猜測(cè)你后臺(tái)傳入前臺(tái)的json字符串格式有問題，可能原因是你后臺(tái)處理json字符串里鍵的雙引號(hào)沒有轉(zhuǎn)義導(dǎo)致的，建議\"這樣轉(zhuǎn)義下試試
添加回答
舉報(bào)
0/150
提交
取消