CRUD（22）：新增-保存添加的数据
一、给保存按钮添加一个id
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
二、规范URI
/emp/{id} GET查询员工
/emp POST员工
/emp/{id} PUT员工
/emp/{id} DELETE员工
三、、在EmployeeController中新定义一个保存的方法。
//保存员工
@RequestMapping(value="/emp",method=RequestMethod.POST)
@ResponseBody
public Msg saveEmp(Employee employee) {
employeeService.saveEmp(employee);
return Msg.success();
}
四、在EmployeeService中新增加一个保存employee到数据库的方法。
//增加员工
public void saveEmp(Employee employee) {
employeeMapper.insertSelective(employee);
}
四、jquery的serialize()方法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
序列化的字符串，用于ajax请求。
五、给按钮绑定事件
//点击保存按钮
$("#emp_save_btn").click(function() {
//1.模态框中的数据提交给服务器进行保存；
//2.发送ajax请求保存员工;
$.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddModal form").serialize(),
success : function(result) {
alert(result.msg);
}
});
});
六、点击保存后弹出提示框，提示处理成功
七、保存成功以后关闭模态框
官方文档关闭模态框
$("#empAddModal").modal('hide');
八、保存成功以后跳到最后一页显示添加的数据
①新增加一个变量表示总记录数
var totalRescord;
②给变量赋值
totalRecord = result.extend.pageInfo.total;
③去最后一条记录的页数，记录数肯定比总页码大
to_page(totalRecord);
九、源代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 拿到当前项目路径，以/开始，不以/结束 -->
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入jquery -->
<script type="text/javascript"
src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入Bootstrap样式 -->
<link
href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${APP_PATH
}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 新增的modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<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" id="myModalLabel">新增员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="empName_add_input"
class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text"
class="form-control" name="empName"
id="empName_add_input" placeholder="empName">
</div>
</div>
<div class="form-group">
<label for="email_add_input"
class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text"
class="form-control" name="email"
id="email_add_input"
placeholder="hello123@qq.com">
</div>
</div>
<div class="form-group">
<label for="gender_add_input"
class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label
class="radio-inline"> <input type="radio"
name="gender"
id="gender1_add_input" value="m"
checked="checked">
男
</label> <label
class="radio-inline"> <input type="radio"
name="gender"
id="gender1_add_input" value="f"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2
control-label">deptName</label>
<div class="col-sm-4">
<!-- 部门提交部门ID即可 -->
<select
class="form-control" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary"
id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
<!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary"
id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- 显示分页 -->
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分页条信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
<!--页面加载完成以后直接发送一个ajax请求，拿到分页数据-->
var totalRescord;
$(function() {
to_page(1);
});
function to_page(pn) {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=" + pn,
type : "GET",
success : function(result) {
//console.log(result);
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条
build_page_nav(result);
}
});
}
//解析显示员工数据
function build_emps_table(result) {
//首先清空原来的emps_table tbody
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(
item.gender == 'm' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>")
.append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-info btn-sm").append(
$("<span></span>").addClass(
"glyphicon
glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass(
"btn btn-danger btn-sm").append(
$("<span></span>")
.addClass("glyphicon
glyphicon-trash")).append(
"删除");
var btnTd = $("<td></td>").append(editBtn).append("
").append(
delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
});
}
//显示分页信息
function build_page_info(result) {
//首先清空原来的
$("#page_info_area").empty();
$("#page_info_area").append(
"当前第" + result.extend.pageInfo.pageNum + "页
共"
+ result.extend.pageInfo.pages +
"页 共"
+ result.extend.pageInfo.total +
"条记录");
totalRecord = result.extend.pageInfo.total;
}
//显示分页条
function build_page_nav(result) {
//首先清空原来的
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
var firstPageLi =
$("<li></li>").append($("<a></a>").append("首页"))
.attr("href", "#");
var prePageLi = $("<li></li>").append(
$("<a></a>").append("«"));
if (result.extend.pageInfo.hasPreviousPage == false) {
prePageLi.addClass("disabled");
} else {
prePageLi.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
var nextPageLi = $("<li></li>").append(
$("<a></a>").append("»"));
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
} else {
nextPageLi.click(function() {
to_page(result.extend.pageInfo.pageNum + 1);
});
}
var lastPageLi =
$("<li></li>").append($("<a></a>").append("末页"))
.attr("href", "#");
firstPageLi.click(function() {
to_page("1");
});
lastPageLi.click(function() {
to_page(result.extend.pageInfo.pages);
});
//添加首页和前一页的显示
ul.append(firstPageLi).append(prePageLi);
$.each(result.extend.pageInfo.navigatepageNums,
function(index,
item) {
var numLi =
$("<li></li>").append($("<a></a>").append(item));
//页码按钮选中变蓝
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
numLi.click(function() {
to_page(item);
});
//添加页码显示
ul.append(numLi);
});
//添加下一页和末页的显示
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮
$("#emp_add_modal_btn").click(function() {
//发送ajax请求，显示部门信息，出现在下拉列表中
getDepts();
//弹出模态框
$("#empAddModal").modal({
backdrop : "static"
});
});
function getDepts() {
$.ajax({
url : "${APP_PATH}/depts",
type : "GET",
success : function(result) {
//显示部门信息在下拉列表中
$.each(result.extend.depts, function() {
var optionEle =
$("<option></option>").append(
this.deptName).attr("value", this.deptId);
optionEle.appendTo("#dept_add_select");
});
}
});
}
//点击保存按钮
$("#emp_save_btn").click(function() {
//1.模态框中的数据提交给服务器进行保存；
//2.发送ajax请求保存员工;
$.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddModal form").serialize(),
success : function(result) {
alert(result.msg);
//关闭模态框
$("#empAddModal").modal('hide');
//来到最后一页显示刚才保存的数据
//发送ajax请求显示最后一页数据
to_page(totalRecord);
}
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号