為什么我的json數據也獲得了，在前臺也有alert提示，但是setContent(json);后就是不在前臺搜索框下面顯示呢
我的各部分代碼如下
package?com.imooc;
import?java.io.IOException;
import?java.util.ArrayList;
import?java.util.List;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?net.sf.json.JSONArray;
public?class?SearchServlet?extends?HttpServlet?{
//這些是模擬數據
static?List<String>?datas?=?new?ArrayList<String>();
static?{
datas.add("ajax");
datas.add("ajaxpost");
datas.add("becky");
datas.add("bill");
datas.add("james");
datas.add("jerry");
}
@Override
protected?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)
throws?ServletException,?IOException?{
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("123");
//首先獲得客戶端發送來的數據keyword
String?keyword?=?request.getParameter("keyword");
//獲得關鍵字后進行處理，得到關聯數據
List<String>?listData?=?getData(keyword);
//返回json格式
// System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//獲得關聯數據的方法
public?List<String>?getData(String?keyword){
List<String>?list?=??new?ArrayList<String>();
for?(String?data:datas){
if?(data.contains(keyword)){
list.add(data);
}
}
return?list;
}
}<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
??<head>
??<style?type="text/css">
?? #mydiv{
?? position:absolute;
?? left:50%;
?? top:50%;
?? margin-left:-200px;
?? margin-top:-50;
?? }
??</style>
??
??<script?type="text/javascript">
?? var?xmlHttp;
?? //獲得用戶輸入內容?的關聯信息?的函數
?? function?getMoreContents(){
?? //首先要獲得用戶輸入的內容
?? var?content?=?document.getElementById("keyword");
?? if?(content.value?==?""){
?? return;
?? }
?? //然后要給服務器發送用戶輸入的內容，因為我們采用的是ajax異步發送數據；
?? //所以我們要使用一個對象,叫做XmlHttp對象
?? xmlHttp?=?createXMLHttp();//獲得xmlHttp對象
?? //要給服務器發送數據
?? var?url?=?"search?keyword="+escape(content.value);
?? //true表示javascript腳本會在send方法之后繼續執行，而不會等待來自服務器的響應
?? xmlHttp.open("GET",?url,?true);
?? //xmlHttp綁定回調方法，這個回調方法會在xmlHttp狀態改變的時候被調用
?? //xmlhttp的轉態為0-4，我們只關心4（compete）這個狀態
?? //所以說，當完成之后再調用回調方法才有意義。
?? 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("Msxml.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+")");
?? //獲得數據后就可以動態的顯示這些數據了，把這些數據展示到輸入框的下面
?? setContent(json);
?? //alert(json);
?? }
?? }
?? }
?? //設置關聯數據的展示，參數代表的是服務器傳遞過來的關聯數據
?? function?setContent(contents){
?? //首先獲取關聯數據的長度，以此來確定生成多少<tr></tr>
?? var?size?=?contens.length;
?? //設置內容
?? for(var?i?=?0;i?<?size;??i++){
?? var?nextNode?=?content[i];//代表的是json格式數據的第i個元素
?? var?tr?=??document.createElement("tr");
?? var?td?=?document.createElement("td");
?? td.setAttribute("border",?"0");
?? td.setAttribute("bg_color",?"#FFAFA");
?? td.onmouseover?=?function()?{
?? this.className?=?'mouseOver';
?? };
?? td.onmouseout?=?function()?{
?? this.className?=?'mouseOut';
?? };
?? td.onclick?=?function()?{
?? //這個方法實現的是：當用鼠標點擊一個關聯的數據時，所點擊關聯數據自動設置為輸入框數據
??
?? };
?? var?text?=?document.createTextNode(nextNode);
?? td.appendChild(text);
?? tr.appendChild(td);
?? document.getElementById("content_table_body").appendChild(tr);
?? }
?? }
??</script>
??</head>
??
??<body>
????<div?id="mydiv">
????<!--?輸入框?-->
????<input?type="text"?size="60"?id="keyword"?onkeyup="getMoreContents()"/>
????<input?type="button"?value="百度一下?"?width="50px">
????<!--?下面是內容展示區域?-->
????<div?id="popDiv">
???? <table?id="content_table"?bgcolor="#FFFAFA"?border="0"?cellspacing="0"?cellpading="0">
???? <tbody?id="content_table_body">
???? <!--?動態查詢出來的數據顯示在這個地方?-->
????
???? </tbody>
???? </table>
????</div>
????</div>
??</body>
</html><?xml?version="1.0"?encoding="UTF-8"?> <web-app?xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"?xmlns="http://java.sun.com/xml/ns/javaee"?xsi:schemaLocation="http://java.sun.com/xml/ns/javaee?http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"?id="WebApp_ID"?version="3.0"> ??<display-name>ajaxtest</display-name> ??<welcome-file-list> ????<welcome-file>index.html</welcome-file> ????<welcome-file>index.htm</welcome-file> ????<welcome-file>index.jsp</welcome-file> ????<welcome-file>default.html</welcome-file> ????<welcome-file>default.htm</welcome-file> ????<welcome-file>default.jsp</welcome-file> ??</welcome-file-list> ??<servlet> ?? <servlet-name>search</servlet-name> ?? <servlet-class>com.imooc.SearchServlet</servlet-class> ??</servlet> ?? ??<servlet-mapping> ?? <servlet-name>search</servlet-name> ?? <url-pattern>/search</url-pattern> ??</servlet-mapping> </web-app>
2018-01-23
你的77行錯了，應該是：?var?nextNode?=?contents[i]; ?少了個s
2017-11-19
我也遇到了同樣的問題，該怎么解決
2017-09-16
我也遇到同樣的問題了，，，，
2017-08-01
第77行 有個地方寫錯了
2017-01-05
我的也出現了這樣的問題，，在瀏覽器上運行時，按下F12后在（document.getElementById("content_table_body").appendChild(tr)）上顯示?Uncaught TypeError: Cannot read property 'appendChild' of null，我就直接把（<tbody></tbody>）刪除了，并把getElementById("content_table_body")改成了getElementById("content_table")，這樣就就可以了，，