老师,请帮忙看看设计的怎么样,谢谢。
package com.imooc.servlet.work;
public class Employee {
private String name;
private String rank;
private String department;
public Employee() {
}
public Employee(String name, String rank, String department) {
this.name = name;
this.rank = rank;
this.department = department;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getRank() {
return rank;
}
public void setRank(String rank) {
this.rank = rank;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
}
-----------------------------------------------------------------------------------------
package com.imooc.servlet.work;
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 List_Servlet
*/
@WebServlet("/list1")
public class List_Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public List_Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
List <Employee> list=new ArrayList<>();
list.add(new Employee("小红","职员","人事部"));
list.add(new Employee("小明","经理","技术部"));
list.add(new Employee("小白","经理","无线事业部"));
String str=JSON.toJSONString(list);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(str);
}
}
----------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" style="width: 200px" value="员工列表" class="b1">
<input type="button" style="width: 200px" value="职位列表" class="b2">
<input type="button" style="width: 200px" value="部门列表" class="b3">
<div style="width:600px;text-align:center;" ></div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/FirstServlet/list1", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var text = xmlhttp.responseText;
var json = JSON.parse(text);
var html1="";
var html2="";
var html3="";
for(var i=0;i<json.length;i++){
var emp=json[i];
html1=html1+"<p>"+emp.name+"</p>";
html3=html3+"<p>"+emp.department+"</p>";
if(i<=1){
html2=html2+"<p>"+emp.rank+"</p>";
}else{
continue;
}
}
$(".b1").click(function() {
$("div").html(html1);
})
$(".b2").click(function() {
$("div").html(html2);
})
$(".b3").click(function() {
$("div").html(html3);
})
}
}
</script>
</body>
</html>
正在回答
同学你好,代码设计正确,做的很好。继续加油!
如果我的回答解决了你的疑惑,请采纳,祝学习愉快~
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手,到Java Web基础,前后端结合助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星