2021年1月25日：
今天完成了增加和查询以及删除的部分代码，明白了ajax以及restful风格的使用方法，以下是我的代码：
首页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var pagetotal;
var pagenum;
$(function() {
topage(1);
$("#checkboxall").click(function(){
$(".check").prop("checked",$(this).prop("checked"))
})
$("#update").click(function() {
var email = $("#emailupdate").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if (!regEmail.test(email)) {
$("#emailupdate").parent().addClass("has-error");
$("#emailupdate").next("span").text("邮箱不符合规范!,请重新输入");
return false;
}
$.ajax({
url : "update/" + $(this).attr("updateid"),
type : "PUT",
data : $("#updatebiao").serialize(),
success : function(data) {
$("#empUpdateModal").modal("hide");
topage(pagenum);
}
})
})
$("#xingming").change(function() {
$("#xingming").parent().removeClass("has-error");
$("#xingming").next("label").empty();
var empName = $(this).val();
$.ajax({
url : "checkuser",
data : "empName=" + empName,
type : "POST",
success : function(result) {
if (result.code == 100) {
$("#xingming").parent().addClass("has-error");
$("#xingming").next("label").text("用户名重复，请重新添加!");
$("#save").attr("click", "false");
} else {
$("#save").attr("click", "true");
}
}
});
})
$("#save").click(
function() {
var click = $(this).attr("click");
if (validate_add_form() == true && click == "true") {
$.ajax({
url : "save",
type : "POST",
data : $("#biaodan").serialize(),
success : function(data) {
if (data.code == 100) {
$("#myModal").modal('hide');
topage(pagetotal);
} else {
if (undefined != data.map.error.email) {
$("#you").parent()
.addClass("has-error");
$("#you").next("label").text(
"邮箱不符合规范!,请重新输入");
}
if (undefined != data.map.error.name) {
$("#xingming").parent().addClass(
"has-error");
$("#xingming").next("label").text(
"用户名不符合规范!,请重新输入");
}
}
}
})
}
})
$("#add").click(function() {
$("#myModal form")[0].reset();
$("#you").parent().removeClass("has-error");
$("#xingming").parent().removeClass("has-error");
$("#xingming").next("label").text("");
$("#you").next("label").text("");
$("#dept").empty();
getdept("#dept");
$("#myModal").modal({
backdrop : "static"
})
})
})
function getdept(ele) {
$.ajax({
url : "depts",
type : "GET",
success : function(data) {
$.each(data.map.depts, function() {
var p = $("<option></option>").append(this.dName).attr(
"value", this.dId);
p.appendTo(ele);
})
}
})
}
$(document).on(
"click",
".bianji",
function() {
$("#updatedept").empty();
getdept("#updatedept");
$.ajax({
url : "emp/" + $(this).attr("updateid"),
type : "GET",
success : function(data) {
var name = data.map.emp.name;
var sex = data.map.emp.sex;
var email = data.map.emp.email;
var dname = data.map.emp.dept.dName;
$("#updatebiao div p").empty();
$("#updatebiao div p").append(name);
$("#emailupdate").attr("value", email);
if (sex == "男") {
$("#sexupdate1").prop("checked", true)
} else {
$("#sexupdate2").prop("checked", true)
}
var l = $("#updatedept option").length;
for (i = 0; i < l; i++) {
var text = $("#updatedept option:eq(" + i + ")")
.text();
if (dname == text) {
$("#updatedept option:eq(" + i + ")").prop(
"selected", true);
}
}
}
})
$("#empUpdateModal").modal({
backdrop : "static"
})
$("#update").attr("updateid", $(this).attr("updateid"))
})
$(document).on("click", ".shanchu", function() {
var id = $(this).attr("deleteid");
if (confirm("是否确定删除?")) {
$.ajax({
url : "delete/" + id,
type : "DELETE",
success : function(data) {
topage(pagenum);
}
})
}
})
$(document).on("click", ".check", function() {
//判断当前选择中的元素是否5个
var flag = $(".check:checked").length == $(".check").length;
$("#checkboxall").prop("checked", flag);
});
function topage(p) {
$.ajax({
url : "emp",
data : "p=" + p,
success : function(data) {
getemps(data);
getpagemessage(data);
getpagetiao(data);
}
})
}
function getemps(data) {
$("#table tbody").empty();
var list = data.map.page.list;
$.each(list, function() {
var check = $("<td></td>").append(
"<input type='checkbox' class='check'/>");
var id = $("<td></td>").append(this.id);
var name = $("<td></td>").append(this.name);
var sex = $("<td></td>").append(this.sex);
var email = $("<td></td>").append(this.email);
var dname = $("<td></td>").append(this.dept.dName);
var button1 = $("<button></button>").attr("updateid", this.id)
.addClass("btn btn-primary btn-sm bianji").append(
$("<span></span>").addClass(
"glyphicon glyphicon-pencil").attr(
"aria-hidden", "true")).append("编辑");
var button2 = $("<button></button>").attr("deleteid", this.id)
.addClass("btn btn-danger btn-sm shanchu").append(
$("<span></span>").addClass(
"glyphicon glyphicon-trash").attr(
"aria-hidden", "true")).append("删除");
var button = $("<td></td>").append(button1).append(button2);
$("<tr></tr>").append(check).append(id).append(name).append(sex)
.append(email).append(dname).append(button).appendTo(
$("#table tbody"));
})
}
function validate_add_form() {
$("#xingming").parent().removeClass("has-error");
$("#xingming").next("label").empty();
$("#you").parent().removeClass("has-error");
$("#you").next("label").empty();
var empName = $("#xingming").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if (!regName.test(empName)) {
$("#xingming").parent().addClass("has-error");
$("#xingming").next("label").text("用户名不符合规范!,请重新输入");
return false;
}
var email = $("#you").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if (!regEmail.test(email)) {
$("#you").parent().addClass("has-error");
$("#you").next("label").text("邮箱不符合规范!,请重新输入");
return false;
}
return true;
}
function getpagetiao(data) {
$("#tiao").empty();
var ul = $("<ul></ul>").addClass("pagination");
var first = $("<li></li>").append(
$("<a></a>").append("首页").attr("href", "#"));
var lastpage = $("<li></li>").append(
$("<a></a>").append("上一页").attr("href", "#"));
if (data.map.page.hasPreviousPage == false) {
first.hide();
lastpage.hide();
}
var nextpage = $("<li></li>").append(
$("<a></a>").append("下一页").attr("href", "#"));
var last = $("<li></li>").append(
$("<a></a>").append("末页").attr("href", "#"));
if (data.map.page.hasNextPage == false) {
nextpage.hide();
last.hide();
}
ul.append(first).append(lastpage);
first.click(function() {
topage(1);
return false;
})
lastpage.click(function() {
topage(data.map.page.pageNum - 1);
return false;
})
$.each(data.map.page.navigatepageNums, function(index, item) {
var page = $("<li></li>").append(
$("<a></a>").append(item).attr("href", "#"));
if (data.map.page.pageNum == item) {
page.addClass("active");
}
ul.append(page);
page.click(function() {
topage(item);
return false;
})
})
ul.append(nextpage).append(last);
nextpage.click(function() {
topage(data.map.page.pageNum + 1);
return false;
})
last.click(function() {
topage(data.map.page.pages);
return false;
})
$("<nav></nav>").append(ul).appendTo($("#tiao"));
}
function getpagemessage(data) {
pagetotal = data.map.page.total;
pagenum = data.map.page.pageNum;
$("#page").empty();
$("#page").append(
"当前第" + data.map.page.pageNum + "页 , 总共" + data.map.page.pages
+ "页 , 总" + data.map.page.total + "条记录");
}
</script>
</head>
<body>
<div class="modal fade" id="empUpdateModal" 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">员工修改</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="updatebiao">
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<p class="form-control-static" id="empName_update_static"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control"
id="emailupdate" placeholder="请修改邮箱"><span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="gender" id="sexupdate1" value="男">男
</label> <label class="radio-inline"> <input type="radio"
name="gender" id="sexupdate2" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">部门名称</label>
<div class="col-sm-4">
<select class="form-control" name="dId" id="updatedept">
</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="update">更新</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="biaodan">
<div class="form-group">
<label class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name"
placeholder="请输入你的姓名" id="xingming"> <label
class="control-label"></label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email"
placeholder="请输入你的邮箱" id="you"> <label
class="control-label"></label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓别:</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="sex" value="男" id="sex1">男
</label> <label class="radio-inline"> <input type="radio"
name="sex" value="女" id="sex2">女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">部门名称:</label>
<div class="col-sm-4">
<select class="form-control" name="dId" id="dept">
</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="save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<div calss="container">
<div class="row">
<div class="col-md-12">
<h1>CRUD</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="add">新增</button>
<button class="btn btn-danger" id="delete">删除</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th><input type="checkbox" id="checkboxall" /></th>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>员工邮箱</th>
<th>部门名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6" id="page"></div>
<div class="col-md-6" id="tiao"></div>
</div>
</div>
</body>
</html>
明天继续学习最后的批量删除。