前言
本次内容主要是关于，如何将前端静态html页面转变为动态jsp页面，以企业添加员工信息列表为例，相关的css和js内容省略
代码
1.创建员工类employee
public class Employee {
private Integer empno;
private String ename;
private String department;
private String job;
private Float salary;
public Employee(Integer empno, String ename, String department, String job, Float salary) {
super();
this.empno = empno;
this.ename = ename;
this.department = department;
this.job = job;
this.salary = salary;
}
public Integer getEmpno() {
return empno;
}
public void setEmpno(Integer empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public Float getSalary() {
return salary;
}
public void setSalary(Float salary) {
this.salary = salary;
}
}
2.创建后台服务，初始列表数据
@WebServlet("/list")
public class employServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public employServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletContext context = request.getServletContext();
List<Employee> list = null;
if(context.getAttribute("employees") == null) {
list = new ArrayList<Employee>();
list.add(new Employee(7782 , "张晓涛", "研发部", "研发工程师" , 7780f));
list.add(new Employee(7839 ,"张丽" , "研发部" , "运维工程师" , 8820f));
list.add(new Employee(5243 , "张倩" , "市场部" , "客户经理" , 6000f));
context.setAttribute("employees", list);
} else {
list = (List<Employee>)context.getAttribute("employees");
}
response.setContentType("text/html;charset =utf-8");
String json = JSON.toJSONString(list);
response.getWriter().println(json);
}
}
创建新增服务，储存列表并响应页面
@WebServlet("/create")
public class CreateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CreateServlet() {
super();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String empno = request.getParameter("empno");
String ename = request.getParameter("ename");
String department = request.getParameter("department");
String job = request.getParameter("job");
String salary = request.getParameter("salary");
Employee emp = new Employee(Integer.parseInt(empno) , ename , department , job , Float.parseFloat(salary));
ServletContext context = request.getServletContext();
List<Employee> list = (List<Employee>)context.getAttribute("employees");
list.add(emp);
context.setAttribute("employees", list);
String json = JSON.toJSONString(list);
response.setContentType("text/html;charset =utf-8");
response.getWriter().println(json);
}
}
4.创建jsp页面，使用ajax请求初始服务与新增服务
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/fmt" prefix = "fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>员工列表</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
.pagination {
margin: 0px
}
.pagination > li > a, .pagination > li > span {
margin: 0 5px;
border: 1px solid #dddddd;
}
.glyphicon {
margin-right: 3px;
}
.form-control[readonly] {
cursor: pointer;
background-color: white;
}
#dlgPhoto .modal-body{
text-align: center;
}
.preview{
max-width: 500px;
}
</style>
<script>
$(function () {
$("#btnAdd").click(function () {
$('#dlgForm').modal()
});
})
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1 style="text-align: center">dodoke员工信息表</h1>
<div class="panel panel-default">
<div class="clearfix panel-heading ">
<div class="input-group" style="width: 500px;">
<button class="btn btn-primary" id="btnAdd"><span class="glyphicon glyphicon-zoom-in"></span>新增
</button>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>员工编号</th>
<th>姓名</th>
<th>部门</th>
<th>职务</th>
<th>工资</th>
</tr>
</thead>
<tbody id = "tbId">
</tbody>
</table>
</div>
</div>
</div>
<!-- 表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="dlgForm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">新增员工</h4>
</div>
<div class="modal-body">
<form action="#" method="post" >
<div class="form-group">
<label for="empno">员工编号</label>
<input type="text" name="empno" class="form-control" id="empno" placeholder="请输入员工编号">
</div>
<div class="form-group">
<label for="ename">员工姓名</label>
<input type="text" name="ename" class="form-control" id="ename" placeholder="请输入员工姓名">
</div>
<div class="form-group">
<label>部门</label>
<select id="dname" name="department" class="form-control">
<option selected="selected">请选择部门</option>
<option value="市场部">市场部</option>
<option value="研发部">研发部</option>
<option value="后勤部">后勤部</option>
</select>
</div>
<div class="form-group">
<label>职务</label>
<input type="text" name="job" class="form-control" id="job" placeholder="请输入职务">
</div>
<div class="form-group">
<label for="sal">工资</label>
<input type="text" name="salary" class="form-control" id="sal" placeholder="请输入工资">
</div>
</form>
<div class="form-group" style="text-align: center;">
<button class="btn btn-primary" onclick ="addEmployee()">保存</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script type ="text/javascript">
$(function() {
getData();
})
function getData() {
$.ajax({
"url":"/list",
"type":"get",
"dataType":"json",
"success":function(data){
$("#tbId").empty();
var str = "";
for(var i = 0; i < data.length; i++) {
str += "<tr><td>" + (i+1) + "</td>";
str += "<td>" + data[i].empno + "</td>";
str += "<td>" + data[i].ename + "</td>";
str += "<td>" + data[i].department + "</td>";;
str += "<td>" + data[i].job + "</td>";
str += "<td style='color: red;font-weight: bold'>￥" + data[i].salary + "元</td></tr>";
}
$("#tbId").append(str);
},
"error":function(xmlhttp, errorText) {
if(xmlhttp.status == "404") {
alert("请求地址有误");
} else if(xmlhttp.status == "405") {
alert("无效的请求方式");
} else if(xmlhttp.status == "500") {
alert("服务器内部错误，请联系管理员");
} else {
alert("产生异常，请联系管理员");
}
}
})
}
function addEmployee() {
var empno = $("#empno").val().trim();
if(empno == null || empno.length == 0 || empno === undefined || empno === NaN) {
alert("请填写员工编号");
return;
}
var ename = $("#ename").val().trim();
if(ename == null || ename.length == 0 || ename === undefined) {
alert("请填写员工姓名");
return;
}
var dname = $("#dname option:selected").val();
var job = $("#job").val().trim();
var salary = $("#sal").val().trim();
var obj = {
"empno":empno,
"ename":ename,
"department":dname,
"job" :job,
"salary" :salary
}
$.ajax({
"url":"/create",
"type":"post",
"data":obj,
"dataType":"json",
"success":function(data){
getData();
},
"error":function(xmlhttp, errorText) {
if(xmlhttp.status == "404") {
alert("请求地址有误");
} else if(xmlhttp.status == "405") {
alert("无效的请求方式");
} else if(xmlhttp.status == "500") {
alert("服务器内部错误，请联系管理员");
} else {
alert("产生异常，请联系管理员");
}
}
})
}
</script>
</html>
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
