老师帮忙看看我这个怎么样，顺便置个顶吧！

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;

import jdk.nashorn.internal.runtime.JSONFunctions;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String y="小红<br>小明<br>小白<br>";//要加多少个，自己看着加
		String z="职员<br>经理<br>";
		String b="人事部<br>技术部<br>无线事业部";
		List list=new ArrayList();
		list.add(y);
		list.add(z);
		list.add(b);
		String json=JSON.toJSONString(list);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="员工列表" name="in">
	<input type="button" value="职位列表" name="in">
	<input type="button" value="部门列表" name="in">
	<div style='text-align:center' id="divContent"></div>
	<script type="text/javascript">
		//取出数组
		var input=document.getElementsByName("in");	
		//遍历数组
		for(var i=0;i<input.length;i++){
			//给每个按钮加个索引属性，要不每个按钮都是显示最后的值，这个在轮播图那里有教过
			input[i].setAttribute("data-index",i);
			//给每个按钮加单击事件
			input[i].onclick=function(){
				//1
				var idx=this.getAttribute("data-index");
				var xmlhttp;
				if(window.XMLHttpRequest){
					xmlhttp=new XMLHttpRequest();
				}else{
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}				
				//2
				xmlhttp.open("GET","/ServletProj/aj",true);
				xmlhttp.send();	
				//3
				xmlhttp.onreadystatechange=function(){
					if(xmlhttp.readyState==4&&xmlhttp.status==200){							
						var json=JSON.parse(xmlhttp.responseText);
						//每个按钮索引对应每个json索引
						document.getElementById("divContent").innerHTML=json[idx];
					}
				}	
										
			}
	}
	</script>
</body>
</html>

按钮样式我懒得弄了，有没有需要改进的地方，或者可以更简单点，我看其他同学编的都多多少少有点小毛病，不够完美。

慕函数5323999 2019-09-16

源自：jQuery与Ajax入门 2-8 自由编程

309

收起

1回答