老师看看，点击按钮无响应

package com.ajax.practice;
 
public class Employee {
private String name;
private String job;
private String department;
 
public Employee() {
     
}
 
public Employee(String name, String job, String department) {
    super();
    this.name = name;
    this.job = job;
    this.department = department;
}
 
public String getName() {
    return name;
}
 
public void setName(String name) {
    this.name = name;
}
 
public String getJob() {
    return job;
}
 
public void setJob(String job) {
    this.job = job;
}
 
public String getDepartment() {
    return department;
}
 
public void setDepartment(String department) {
    this.department = department;
}
 
 
}

package com.ajax.practice;
 
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 ajaxEmp
 */
@WebServlet("/ajaxEmp")
public class ajaxEmp extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List list=new ArrayList();
        list.add(new Employee("小红","职员","人事部"));
        list.add(new Employee("小明","经理","技术部"));
        list.add(new Employee("小白","职员","无线事业部"));
        String json=JSON.toJSONString(list);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);
    }
 
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<input style="width:200px" id="btn0" type="button" value="员工列表">
<input style="width:200px" id="btn1" type="button" value="职位列表">
<input style="width:200px" id="btn2" type="button" value="部门列表">
</div>
<div id="content" align="center"></div>
<script type="text/javascript">
var xmmlhttp;
if(windows.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
 
}else{
   xmlhttp=new ActiveXOject("Microsoft.XMLHttp")
}
xmlhttp.open("GET","/jQueryPractice/ajaxEmp",true);
xmlhttp.send();
xmlhttp.onreadyStatechange=function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var text=xmlhttp.responseText;
        var json=JSON.parse(text);
         
        //员工列表
        document.getElementById("btn0").onclick=function(){
            var html="";
            var num=0;
            for(var i=0;i<json.length;i++){
                html+=json[i].name+"<br>";
            }
            document.getElementById("content").innerHTML=html;
             
        }
         
        //职位列表
        document.getElementById("btn1").onclick=function(){
            var html="";
            var num=0;
            for(var i=0;i<json.length;i++){
                var job=json[i].job;
                html+=json[i].job+"<br>";
            }
            document.getElementById("content").innerHTML=html;
             
            //部门列表
            document.getElementById("btn2").onclick=function(){
                var html="";
                for(var i=0;i<json.length;i++){
                html+=json[i].department+"<br>";
                 
                }
                document.getElementById("content").innerHTML=html;
             
        }
        }
    }
}
</script>
</body>
</html>

独孤求戒 2019-04-25

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

收起

1回答

好帮手慕柯南回答被采纳获得+3积分 2019-04-26 10:22:29

同学你好！

1.在你的代码中有个小问题，这里应该是window，同学多加了s

2.点击按钮没有反应是因为同学在点击按钮后没有去发送ajax请求，同学可以参考如下代码（以员工列表为例）：

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

独孤求戒提问者 #1

每一个列表都要写这段发送ajax请求的代码岂不是很麻烦？有没有简单的办法

2019-04-26 16:09:41
好帮手慕柯南回复提问者独孤求戒 #2

同学不可以呢，你的三个按钮相当于三个不同的功能，所以每个按钮都需要去发送ajax请求的，在今后我们可以根据每个按钮返回不同的信息呢。

2019-04-26 16:13:17