还有要改进的地方吗

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#all{
     width: 600px;
     height: 50px;
     background-color: #D0D0D0;
     margin: auto;
}
 
.b{
    width: 196px;
    height: 50px;
    margin: auto;
    background-color: #F0F0F0;
    font-size: 15px;
}
 
#list{
    width: 600px;
    height: 600px;
    text-align: center;
    font-size: 20px;
    background-color: #F0F0F0;
    margin: auto;
}
</style>
</head>
 
<body>
     <div id="all">
         <button class="b" id="emp">员工列表</button>
         <button class="b" id="depart">部门列表</button>
         <button class="b" id="postion">职位列表</button>
    </div>     
         <div id="list"></div>
          
         <script type="text/javascript">
                   //创建XMLHttpRequest对象
                   var xmlhttp ;
                   if(window.XMLHttpRequest){
                       xmlhttp = new XMLHttpRequest();
                   }
                  
                  //实现员工列表
                 document.getElementById("emp").onclick = function(){
                   //发送Ajax请求
                   xmlhttp.open("GET","/Ajax/Dpart?flag=1",true);
                   xmlhttp.send();                  
                   //处理服务器响应
                   xmlhttp.onreadystatechange = function(){
                       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                           //获取响应文本
                           var text = xmlhttp.responseText;
                           var json = JSON.parse(text);
                           console.log(json);
                           var html = "";
                           for(var i = 0; i < json.length; i ++){
                               var emp = json[i];
                               html = html + "<h3>" + emp + "</h3>";
                               document.getElementById("list").innerHTML = html;
                           }
                       }
                   }
                    
               }
                
                 //实现部门列表
                 document.getElementById("depart").onclick = function(){
                   //发送Ajax请求
                   xmlhttp.open("GET" , "/Ajax/Dpart?flag=2",true);
                   xmlhttp.send();                  
                   //处理服务器响应
                   xmlhttp.onreadystatechange = function(){
                       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                           //获取响应文本
                           var text = xmlhttp.responseText;
                           var json = JSON.parse(text);
                           console.log(json);
                           var html = "";
                           for(var i = 0; i < json.length; i ++){
                               var emp = json[i];
                               html = html + "<h3>" + emp + "</h3>";
                               document.getElementById("list").innerHTML = html;
                           }
                       }
                   }
                    
               }
                  
                 //实现职位列表
                 document.getElementById("postion").onclick = function(){
                   //发送Ajax请求
                   xmlhttp.open("GET" , "/Ajax/Dpart?flag=3",true);
                   xmlhttp.send();                  
                   //处理服务器响应
                   xmlhttp.onreadystatechange = function(){
                       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                           //获取响应文本
                           var text = xmlhttp.responseText;
                           var json = JSON.parse(text);
                           console.log(json);
                           var html = "";
                           for(var i = 0; i < json.length; i ++){
                               var emp = json[i];
                               html = html + "<h3>" + emp + "</h3>";
                               document.getElementById("list").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 Dpartment

@WebServlet("/Dpart")

public class Dpartment extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setCharacterEncoding("utf-8");

List<String> department = new ArrayList<>();

List<String> employee = new ArrayList<>();

List<String> position = new ArrayList<>();

department.add("人事部");

department.add("市场部");

department.add("研发部");

employee.add("张三丰");

employee.add("杨过");

employee.add("黄老邪");

position.add("工程师");

position.add("经理");

position.add("董事长");

String flag = request.getParameter("flag");

int a = Integer.parseInt(flag);

if(a == 1) {

String json = JSON.toJSONString(employee);

response.getWriter().println(json);

}else if(a == 2) {

String json = JSON.toJSONString(department);

response.getWriter().println(json);

}else {

String json = JSON.toJSONString(position);

response.getWriter().println(json);

}

Heisenberg_bo 2019-03-17

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

收起

2回答

好帮手慕阿莹回答被采纳获得+3积分 2019-03-18 14:31:14

同学写的代码的可以的，这里老师把html页面做了一下修改，：

我们用一个function来实现，根据传入的参数不同，显示不同的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#all{
     width: 600px;
     height: 50px;
     background-color: #D0D0D0;
     margin: auto;
}
  
.b{
    width: 196px;
    height: 50px;
    margin: auto;
    background-color: #F0F0F0;
    font-size: 15px;
}
  
#list{
    width: 600px;
    height: 600px;
    text-align: center;
    font-size: 20px;
    background-color: #F0F0F0;
    margin: auto;
}
</style>
</head>
  
<body>
     <div id="all">
         <button class="b" id="emp" onclick="check(1)">员工列表</button>
         <button class="b" id="depart" onclick="check(2)">部门列表</button>
         <button class="b" id="postion" onclick="check(3)">职位列表</button>
    </div>     
         <div id="list"></div>
           
         <script type="text/javascript">
                   //创建XMLHttpRequest对象
                   var xmlhttp ;
                   if(window.XMLHttpRequest){
                       xmlhttp = new XMLHttpRequest();
                   }
                   
                  //实现员工列表
                 function check(falg){
                   //发送Ajax请求
                   xmlhttp.open("GET","/Ajax/Dpart?flag="+falg,true);
                   xmlhttp.send();                  
                   //处理服务器响应
                   xmlhttp.onreadystatechange = function(){
                       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                           //获取响应文本
                           var text = xmlhttp.responseText;
                           var json = JSON.parse(text);
                           console.log(json);
                           var html = "";
                           for(var i = 0; i < json.length; i ++){
                               var emp = json[i];
                               html = html + "<h3>" + emp + "</h3>";
                               document.getElementById("list").innerHTML = html;
                           }
                       }
                   }
                     
               }
                 
                   
         </script>
</body>
  
</html>