还有要改进的地方吗
来源：2-8 自由编程
Heisenberg_bo
2019-03-17 17:58:56
<!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);
}
}
}
2回答
-
同学写的代码的可以的，这里老师把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>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0 -
Heisenberg_bo
提问者
2019-03-17
总感觉页面上的代码重复较多，是否可以优化
0
相似问题
回答 3
回答 1