老是这个问题怎么解决

来源：2-8 自由编程

Ctrlzhao

2019-11-23 15:25:28

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div style="text-align:center">
		<input style="width:200px" type="button" value="员工列表"  id="btn1">
		<input style="width:200px" type="button" value="职位列表"  id="btn2">
		<input style="width:200px" type="button" value="部门列表"  id="btn3">
	</div>
		
	<div id="container" style="text-align:center"></div>
		
	<script type="text/javascript">
		var list=document.getElementsByTagName("input");
		document.getElementById("btn1").onclick = function(){
			//1、创建XmlHttpRequest
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			console.log(xmlhttp);
			//2、发送Ajax请求
			xmlhttp.open("GET","/ajax/cs",true);
			xmlhttp.send();
			//3、处理服务器响应
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					var text=xmlhttp.responseText;
					var json=JSON.parse(text);//text文本转换为JSON处理对象
					var html=html+"<h2>"+json[0]+"</h2>";
					document.getElementById("container").innerHTML=html;
				}
			} 
		}
		document.getElementById("btn2").onclick = function(){
			//1、创建XmlHttpRequest
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			console.log(xmlhttp);
			//2、发送Ajax请求
			xmlhttp.open("GET","/ajax/cs",true);
			xmlhttp.send();
			//3、处理服务器响应
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					var text=xmlhttp.responseText;
					var json=JSON.parse(text);//text文本转换为JSON处理对象
					var html=html+"<h2>"+json[1]+"</h2>";
					document.getElementById("container").innerHTML=html;
				}
			} 
		}	
		document.getElementById("btn3").onclick = function(){
			//1、创建XmlHttpRequest
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//2、发送Ajax请求
			xmlhttp.open("GET","/ajax/cs",true);
			xmlhttp.send();
			//3、处理服务器响应
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					var text=xmlhttp.responseText;
					var json=JSON.parse(text);//text文本转换为JSON处理对象
					var html=html+"<h2>"+json[2]+"</h2>";
					document.getElementById("container").innerHTML=html;
				}
			} 
		}	
	</script>
</body>

</html>

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class CompanyServlet
 */
@WebServlet("/cs")
public class EmployeeListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public EmployeeListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String str1 = "小红<br>小明<br>小白";
        String str2 = "职员<br>经理";
        String str3 = "人事部<br>技术部<br>无线事业部";
		List list=new ArrayList();
		list.add(str1);
		list.add(str2);
		list.add(str3);
		String json=JSON.toJSONString(list);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}