作业 2-8
来源：2-8 自由编程
jia_蛙
2019-11-15 20:01:38
package com.zhou.company;
/**
* CompanyInfo JavaBean 公司信息类
* @author 25677
*
*/
public class CompanyInfo {
private String staffName;//员工
private String post;//职位
private String department;//部门
public CompanyInfo() {
}
public CompanyInfo(String staffName, String post, String department) {
super();
this.staffName = staffName;
this.post = post;
this.department = department;
}
public String getStaffName() {
return staffName;
}
public void setStaffName(String staffName) {
this.staffName = staffName;
}
public String getPost() {
return post;
}
public void setPost(String post) {
this.post = post;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
}package com.zhou.company;
import java.io.IOException;
import java.util.HashSet;
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 StaffListServlet
*/
@WebServlet("/staff_list")
public class StaffListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public StaffListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HashSet<CompanyInfo> hs = new HashSet<CompanyInfo>();
hs.add(new CompanyInfo("老李","Java后端开发","研发部"));
hs.add(new CompanyInfo("老张","客户经理","市场部"));
hs.add(new CompanyInfo("老朱","web前端","研发部"));
//使用fastJson的核心对象JSON中的toJSONString()方法对list对象进行序列化
String json = JSON.toJSONString(hs);
//因为List中出现了中文所以我们这里要设置字符集格式
response.setContentType("text/html;charset=UTF-8");
//System.out.println(json);
response.getWriter().println(json);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>职员列表</title>
<style>
#div1{
width:100%;
margin:0 auto;
}
input{
width:30%;
margin-left:2.5%;
}
#div2{
text-align:center;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="员工列表" name="staffName">
<input type="button" value="职位列表" name="post">
<input type="button" value="部门列表" name="department">
</div>
<div id="div2">
</div>
<!-- 对JQuery进行引用-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
//IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码
xmlhttp = new XMLHttpRequest();
}else{
//对IE5 IE6进行兼容
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2 发送AJAX请求
xmlhttp.open("GET","/ajax/staff_list",true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取响应体的文本
var text = xmlhttp.responseText;
//console.log(text);
//将json字符串转换成json
var json = JSON.parse(text);
$("input[name='staffName']").click(function(){
var html = "";
for(var i=0;i<json.length;i++){
html = html + "<h2>" + json[i].staffName + "</h2>";
}
$("#div2").html(html);
});
$("input[name='post']").click(function(){
var html = "";
for(var i=0;i<json.length;i++){
html = html + "<h2>" + json[i].post + "</h2>";
}
$("#div2").html(html);
});
$("input[name='department']").click(function(){
var html = "";
for(var i=0;i<json.length;i++){
html = html + "<h2>" + json[i].department + "</h2>";
}
$("#div2").html(html);
});
}
}
</script>
</body>
</html>可能一开始自己理解有点错误，我做完之后看到很多人的都是用list直接存储姓名、职位等，我是用hashset
存储一整个员工信息，然后最有从hashSet中的对象中一个一个取它们的姓名、职位、部门，所以这后面导致
职位或者部门可能会有人的相同，虽然这里我没列举多个相同的属性，只有在部门出现了两个研发部，ps:假设
姓名可能会相同，不管他。 如果我想在输出职业和部门的时候不输出相同的，我这里在不修改存储方式的
情况下，在绑定单击事件的时候该怎么去重呢？
写回答
1回答
-
同学你好，老师在同学的代码上进行了修改，关于修改部分的解释，老师写在了注释中，请同学参考，这里只修改了一个html文件，如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>职员列表</title> <style> #div1{ width:100%; margin:0 auto; } input{ width:30%; margin-left:2.5%; } #div2{ text-align:center; } </style> </head> <body> <div id="div1"> <input type="button" value="员工列表" name="staffName"> <input type="button" value="职位列表" name="post"> <input type="button" value="部门列表" name="department"> </div> <div id="div2"> </div> <!-- 对JQuery进行引用--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script> //1.创建XMLHttpRequest对象 var xmlhttp; if(window.XMLHttpRequest){ //IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码 xmlhttp = new XMLHttpRequest(); }else{ //对IE5 IE6进行兼容 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2 发送AJAX请求 xmlhttp.open("GET","/test04/staff_list",true); xmlhttp.send(); //3.处理服务器响应 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //获取响应体的文本 var text = xmlhttp.responseText; //console.log(text); //将json字符串转换成json var json = JSON.parse(text); $("input[name='staffName']").click(function(){ var html = ""; for(var i=0;i<json.length;i++){ html = html + "<h2>" + json[i].staffName + "</h2>"; } $("#div2").html(html); }); $("input[name='post']").click(function(){ var html = ""; //定义一个数组 var arr=[]; for(var i=0;i<json.length;i++){ //如果这个数组中不包含该元素，则显示该元素，并放入到数组中， //当有重复元素时，则就不会进入这个if中进行展示了 if(arr.indexOf(json[i].post) == -1){ html = html + "<h2>" + json[i].post + "</h2>"; arr.push(json[i].post); } } $("#div2").html(html); }); $("input[name='department']").click(function(){ var html = ""; //定义一个数组 var arr=[]; //如果这个数组中不包含该元素，则显示该元素，并放入到数组中， //当有重复元素时，则就不会进入这个if中进行展示了 for(var i=0;i<json.length;i++){ if(arr.indexOf(json[i].department) == -1){ html = html + "<h2>" + json[i].department + "</h2>"; arr.push(json[i].department); } } $("#div2").html(html); }); } } </script> </body> </html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
