为什么我的json数据也获得了，在前台也有alert提示，但是setContent(json);后就是不在前台搜索框下面显示呢-慕课网

为什么我的json数据也获得了，在前台也有alert提示，但是setContent(json);后就是不在前台搜索框下面显示呢

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

阳光的味道_

2016-12-31 16:29

我的各部分代码如下

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>

写回答关注

5回答

慕粉_紫色萱依草

2018-01-23 08:33:37

你的77行错了，应该是： var nextNode = contents[i]; 少了个s

0 0
慕侠5932222

2017-11-19 14:25:12

我也遇到了同样的问题，该怎么解决

0 0
慕虎0269961

2017-09-16 11:00:29

我也遇到同样的问题了，，，，

0 0
慕侠3254041

2017-08-01 16:23:17

第77行有个地方写错了

0 0
林夕_090

2017-01-05 14:29:52

我的也出现了这样的问题，，在浏览器上运行时，按下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")，这样就就可以了，，

0 1