转载自：https://www.cnblogs.com/kebibuluan/p/9017754.html
3、尚硅谷_SSM高级整合_使用ajax操作实现修改员工的功能
当我们点击编辑案例的时候，我们要弹出一个修改联系人的模态对话框，在上面可以修改对应的联系人的信息
这里我们我们要编辑按钮添加点击事件弹出对话框
第一步：在页面中在新增一个编辑联系人的模态对话框
第二步：给编辑按钮添加点击事件，这里要给多个编辑按键添加点击事件，我们使用class的方式，我们给多个编写按钮添加同一个相同的class属性，不用分别设置不同的id
//添加编辑按钮
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
编辑按钮都有一个edit_btn标志，我们给它添加点击事件
//给编辑按钮添加点击事件
$(".edit_btn").click(function(){
});
写成这种形式是无法给按钮添加事件的，这里要特别的注意，因为上面的代码是写在javasript代码中，javascript在页面创建完成之前就已经执行完了，而上面的编辑和删除按钮我们都是页面加载完成之后使用ajax到服务器请求得到数据之后重新添加的，如果采用上面的实现，在执行javascript代码的
时候实际上还不存在编辑和删除按钮，添加按钮点击事件当然会失败，这里一定要特别注意的，使用ajax特别需要注意的地方。我们可以采用下面的方式进行解析
上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于：
1》》.click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
2》》而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件
我们来看下我们的代码
index.sjp
<%@ 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 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">
<title>员工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<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>
<!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModalUpdate" placeholder="name">
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</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 ="saveEmp">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</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 ="saveEmp">保存</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="addEmp">新增</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>
<!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
<script type="text/javascript">
//定义一个全局变量，获得当前中的记录数
var total;
$(function(){
//页面加载完毕，去首页获得对应的数据
to_page(1);
});
//使用ajax到后台服务器查询数据
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);
}
});
}
//解析服务器返回的json数据，并在员工表中显示出来
function build_emps_table(result){
//在构建之前先清空所有的数据
$("#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 gender = item.gender == 'M'?"男":"女";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加编辑按钮
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//将上面的table表td数据添加到tr中，这里是一个链式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
});
}
//解析显示分页信息
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+"条记录");
total = result.extend.pageInfo.total;
}
//解析右下角的导航栏
function build_page_nav(result){
//page_nav_area
$("#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){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//给前一页和首页添加按钮点击事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳转到当前页的前一页
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
//如果没有下一页不能被点击
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//给下一页和尾页添加点击事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍历给ul中添加页码提示
$.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(){
//点击的时候重新使用ajax到服务器查询数据
to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮，弹出新增加员工的对话框
$("#addEmp").click(function(){
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
var parent = $("#dIdModal");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//弹出对话框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//点击保存联系人
$("#saveEmp").click(function(){
//判断当前的联系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判断输入的参数是否满足规则
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判断后端返回的结果中，后端对用户的校验结果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存联系人成功需要做下面的几件事情
//第一件事情就是让新建联系人的对话框摸太框消失
$("#addEmpModal").modal('hide');
//第二个跳转到最后一页
//这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
//也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
//使用ajax重新再查询下最后一页员工的数目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//说明邮箱格式错误
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//说明姓名格式有错误
if(undefined != result.extend.err_map.empName){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校验数据
//校验表单数据
function validate_add_form(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("姓名格式不正确");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("");
};
//2、校验邮箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("邮箱格式不正确");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//给输入联系人的input添加change事件，判断当前联系人是否可用
$("#empNameModal").change(function(){
//this表示当前操作的对象，是docment类型
//获得当前输入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//说明该联系人已经在后台存在不可以
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人已经存在");
//如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//说明该联系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//给编辑按钮添加点击事件
$(document).on("click",".edit_btn",function(){
//弹出模态对话框
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
//发送ajax请求获得对应的部门信息
var parent = $("#dIdModalUpdate");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//弹出对话框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
</script>
</div>
</body>
</html>
相当的经典
29、尚硅谷_SSM高级整合_修改_回显员工信息.avi
上面我们实现了当点击编辑按钮的时候弹出了一个模态对话框，但是上面还没有显示需要编辑的联系人的信息，接下我们实现该功能
这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id
在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
相当的经典
接下面我们在修改页面我们让该员工的姓名不能被修改，我们要替换下name这边的样式不能在使用
<input type="text" name="empName" class="form-control" id="empNameModalUpdate" placeholder="name">
input对话框了，而应该使用下面的这种形式的
<p class="form-control-static" id="empNameModalUpdate"></p>
接下来我们来看对应的代码
EmployeeController.java
package com.atguigu.crud.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/**
*
* 处理员工的增删改查操作
* */
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
/**
* 负责将PageInfo对象转化成json对象
* */
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {
//使用mybatis分页插件 pn表示当前查询的页数，5表示每页显示第几条
System.out.println("EmployeeController is called pn"+pn);
PageHelper.startPage(pn, 5);
//在PageHelper.startPage(pn, 5);后面的查询语句就可以实现分页查询
List<Employee> list = employeeService.getAll();
//我们将查询的结果封装到PageInfo对象之中,5表示右下角导航栏的数目是5
PageInfo info = new PageInfo(list,5);
Msg msg = new Msg();
msg.setCode(100);
msg.setMsg("业务操作成功");
msg.getExtend().put("pageInfo", info);
return msg;
}
/**
* 这里一定要注意采用的resetful风格，请求方式必须是post
* */
@RequestMapping(value="/save",method=RequestMethod.POST)
@ResponseBody
public Msg save(@Valid Employee employee,BindingResult result){
System.out.println("save is calle:"+employee.toString());
//这里首先要判断用户输入的参数是否合法
Map<String,Object> err_map = new HashMap<String, Object>();
Msg msg = new Msg();
if(result.hasErrors()){
List<FieldError> errors = result.getFieldErrors();
for( FieldError error: errors){
System.out.println("错误的字段是："+error.getField());
System.out.println("错误的消息是："+error.getDefaultMessage());
err_map.put(error.getField(), error.getDefaultMessage());
}
msg.setCode(200);
msg.setMsg("员工保存失败");
msg.getExtend().put("err_map", err_map);
}else{
employeeService.save(employee);
msg.setCode(100);
msg.setMsg("保存员工数据成功");
}
return msg;
}
@RequestMapping("/isUserExist")
@ResponseBody
public Msg isUserExist(@RequestParam("empName") String empName){
System.out.println("isUserExist is called:"+empName);
Msg msg = new Msg();
Boolean exits = employeeService.isUserExist(empName);
if(exits){
//200表示联系人已经存在
msg.setCode(200);
}else{
//100表示联系人可用
msg.setCode(100);
}
return msg;
}
//通过id查询到员工的信息，采用resetful风格
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmpById(@PathVariable("id") String id){
System.out.println("getEmpById is called:"+id);
Msg msg = new Msg();
Employee employee = employeeService.getEmpById(id);
msg.setCode(100);
msg.setMsg("查询联系人成功");
msg.getExtend().put("emp", employee);
return msg;
}
}
EmployeeService.java
package com.atguigu.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
public List<Employee> getAll(){
List<Employee> list = employeeMapper.selectByExampleWithDept(null);
return list;
}
public void save(Employee employee) {
// TODO Auto-generated method stub
//这里要注意insert和insertSelevite的区别，使用insert将会null字段插入到数据库中。insertselct不会
//现在要实现员工的id自增长，employee中的id字段传递过来的值是null字段，所以不能使用insert，会将null字段插入
employeeMapper.insertSelective(employee);
}
public Boolean isUserExist(String empName) {
// TODO Auto-generated method stub
//采用mybatis的高级查找功能，判断当前用户是否存在
/***
* MyBatis的Mapper接口以及Example的实例函数及详解
* mybatis的逆向工程中会生成实例及实例对应的example，example用于添加条件，相当where后面的部分
xxxExample example = new xxxExample();
Criteria criteria = new Example().createCriteria();
User user = XxxMapper.selectByPrimaryKey(100); //相当于select * from user where id = 100
* */
EmployeeExample example = new EmployeeExample();
Criteria createCriteria = example.createCriteria();
createCriteria.andEmpNameEqualTo(empName);
long countByExample = employeeMapper.countByExample(example);
if(countByExample > 0){
return true;
}else{
return false;
}
}
public Employee getEmpById(String id) {
// TODO Auto-generated method stub
Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
return employee;
}
}
index.jsp
<%@ 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 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">
<title>员工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<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>
<!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<p class="form-control-static" id="empNameModalUpdate"></p>
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</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 ="saveEmp">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</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 ="saveEmp">保存</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="addEmp">新增</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>
<!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
<script type="text/javascript">
//定义一个全局变量，获得当前中的记录数
var total;
$(function(){
//页面加载完毕，去首页获得对应的数据
to_page(1);
});
//使用ajax到后台服务器查询数据
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);
}
});
}
//解析服务器返回的json数据，并在员工表中显示出来
function build_emps_table(result){
//在构建之前先清空所有的数据
$("#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 gender = item.gender == 'M'?"男":"女";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加编辑按钮
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id
// 在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
editBtn.attr("edit_id",item.empId);
//将上面的table表td数据添加到tr中，这里是一个链式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
});
}
//解析显示分页信息
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+"条记录");
total = result.extend.pageInfo.total;
}
//解析右下角的导航栏
function build_page_nav(result){
//page_nav_area
$("#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){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//给前一页和首页添加按钮点击事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳转到当前页的前一页
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
//如果没有下一页不能被点击
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//给下一页和尾页添加点击事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍历给ul中添加页码提示
$.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(){
//点击的时候重新使用ajax到服务器查询数据
to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮，弹出新增加员工的对话框
$("#addEmp").click(function(){
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
var parent = $("#dIdModal");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//弹出对话框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//点击保存联系人
$("#saveEmp").click(function(){
//判断当前的联系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判断输入的参数是否满足规则
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判断后端返回的结果中，后端对用户的校验结果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存联系人成功需要做下面的几件事情
//第一件事情就是让新建联系人的对话框摸太框消失
$("#addEmpModal").modal('hide');
//第二个跳转到最后一页
//这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
//也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
//使用ajax重新再查询下最后一页员工的数目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//说明邮箱格式错误
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//说明姓名格式有错误
if(undefined != result.extend.err_map.empName){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校验数据
//校验表单数据
function validate_add_form(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("姓名格式不正确");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("");
};
//2、校验邮箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("邮箱格式不正确");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//给输入联系人的input添加change事件，判断当前联系人是否可用
$("#empNameModal").change(function(){
//this表示当前操作的对象，是docment类型
//获得当前输入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//说明该联系人已经在后台存在不可以
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人已经存在");
//如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//说明该联系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//给编辑按钮添加点击事件
$(document).on("click",".edit_btn",function(){
//弹出模态对话框
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
//发送ajax请求获得对应的部门信息
var parent = $("#dIdModalUpdate");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//使用ajax请求获得对应的员工信息
var emp_id = $(this).attr("edit_id");
$.ajax(
{
url:"${APP_PATH}/emp/"+emp_id,
type:"GET",
success:function(result){
//在对话框中显示显示姓名 p标签是一个文本使用text
$("#empNameModalUpdate").text(result.extend.emp.empName);
//给邮箱复制，input对话框使用val
$("#emailModalUpdate").val(result.extend.emp.email);
//接下来要让该联系人对应的性别被选中，如何实现了
//首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
//男的单选框被选中
$("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
$("#updateEmpModal select").val([result.extend.emp.dId]);
}
}
);
//弹出对话框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
</script>
</div>
</body>
</html>
30、尚硅谷_SSM高级整合_修改_Ajax发送PUT请求引发的血案.avi
接下来我们要实现下面的功能。当点击修改联系人的保存按钮的时候，我们需要使用ajax的方式将数据携带到后端进行保存
这里有下面的几个知识点需要强调和注意的地方：
保存联系人的时候我们使用的是：
updateByPrimaryKeySelective
int updateByPrimaryKeySelective(TbItem record);
int updateByPrimaryKey(TbItem record);
上面的是逆转工程生成的Mapper接口
updateByPrimaryKeySelective会对字段进行判断再更新(如果为Null就忽略更新)，如果你只想更新某一字段，可以用这个方法。
updateByPrimaryKey对你注入的字段全部更新，即使对应的字段为null字段
第二个需要注意的地方：
在编辑联系人的按钮中可以获得当前联系人的id，我们可以在点击编辑联系人按钮的时候，将当前的联系人id值赋值给修改联系人页面中的更新按钮中，给更新按钮添加一个自定义的属性值，该属性值就是联系人的id，这样在更新联系人页面，通过从更新按钮的自定义属性中我们就可以获得更新联系人的id
通过这个视频教程，我们明白了使用给按钮添加自定义属性来代替使用全局变量，相当的经典
第二点：需要注意的，我们更新联系人的时候采用的是restfu风格emp/id的方式来更新联系人，必须采用put方式提交，在springmvc中
Spring Mvc将Get和Post请求转为Delete和Put请求
不清楚的看上硅谷spring mvc的视频教程相当的经典
不说那么多介绍了，什么restful风格url什么的！直接开始。
在web.xml文件中配置
<!-- 配置 HiddenHttpMethodFilter: 把 POST 请求转为 DELETE、PUT 请求 -->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
第二点：
3.在springMvc配置文件中配置静态资源
<!--静态资源交给默认的Servlet-->
<mvc:default-servlet-handler/>
<mvc:annotation-driven></mvc:annotation-driven>
第三点
将Get请求转为Delete请求
<!--一个删除链接，为get请求-->
<a class="delete" href="emp/${emp.id}">Delete</a>
<!--利用js,将get请求转为DELETE请求-->
<script type="text/javascript">
$(function() {
alert("hello");
$(".delete").click(function(){
var href=$(this).attr("href");
$("form").attr("action",href).submit();
return false;
});
});
</script>
<!--DELETE请求细节-->
<form action="" method="POST">
<input type="hidden" name="_method" value="DELETE" >
</form>
<!--接收DELETE请求的细节-->
@RequestMapping(value="/emp/{id}",method=RequestMethod.DELETE)
public String delete(@PathVariable("id") Integer id){
System.out.print(employeeDao.delete(id));
return "redirect:/emps";
}
这里我们来详细分析下，不清楚的看springmvc 上硅谷的视频教程，首先要讲get方式转换成delete，我们现在页面中添加一个表单，给表单添加一个input ，springmvc 规定必须携带一个name为_method的属性，对于的value值
就是你要转换的字段这里是DELET，将get转换成delete
当我们点击a标签的时候，首先获得a标签中属性是href的值，将该值赋值给form表单标签的action属性，主要表单form的method必须是post，实际上当你点击a标签的时候，实际上提交的是form标签，实现了将方式转换成restful方式的DELETE
5.Post请求转为Put请求
<form:form action="${pageContext.request.contextPath}/emp" method="POST"
modelAttribute="employee"><br>
<c:if test="${employee.id == null }">
<!-- path 属性对应 html 表单标签的 name 属性值 -->
LastName: <form:input path="lastName"/>
<form:errors path="lastName"></form:errors>
</c:if>
<c:if test="${employee.id != null }">
<form:hidden path="id"/>
<!-- 将POST请求转化为PUT请求 -->
<input type="hidden" name="_method" value="PUT"/>
</c:if>
<br>
Email: <form:input path="email"/>
<input type="submit" value="Submit"/>
</form:form>
上面的表单标签使用的是spring mvc的表单标签，<form:hidden path="id"/>表示隐藏提交一个id字段的属性值，那现在要讲post方式转换成delete方式，能不能写成下面的形式了
<form:hidden name="_method" value="PUT" path="id"/>
是不行的，因为spring mvc 的hidden标签中<form:hidden>没有name字段，只能在还表单中再添加一个input
<input type="hidden" name="_method" value="PUT"/>
这种形式，相当的经典
我们在代码中我们使用ajax将post转换成put方式的原理同上面的分析
其实ajax也可以直接发送put请求
//给编辑联系人的保存按钮增加点击事件
$("#saveEmpUpdate").click(function(){
//使用ajax提交数据到后台更新数据这里需要
//强调的是我们采用的是put方式的提交
// data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
var emp_id = $(this).attr("edit_id");
$.ajax({
url:"${APP_PATH}/update/"+emp_id,
type:"PUT",
data:$("#addEmpModal form").serialize(),
success:function(result){
alert("kskkfd");
}
});
});
但是除了在web.xml配置了
<filter>
<filter-name>hidden</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hidden</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
还需要添加下面的配置
<!-- 配置HttpPutFormContentFilter支持ajax直接发送put请求 -->
<filter-name>HttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
我们来看整个web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>SSM</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- 配置中文乱码问题 ，字符编码必须放在所以过滤器之前-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 为了支持restful风格，需要配置下面的filter -->
<filter>
<filter-name>hidden</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hidden</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<!-- 配置HttpPutFormContentFilter支持ajax直接发送put请求 -->
<filter-name>HttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 配置spring 的启动文件 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置springmvc的配置文件 -->
<servlet>
<servlet-name>DispatcherServlet</servlet-name><!--在DispatcherServlet的初始化过程中，框架会在web应用的 WEB-INF文件夹下寻找名为[servlet-name]-servlet.xml 的配置文件，生成文件中定义的bean。-->
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--指明了配置文件的文件名，不使用默认配置文件名，而使用dispatcher-servlet.xml配置文件。-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:dispatcher-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
这里我们要强调下：characterEncodingFilter要保证有效必须放在所有的过滤器之前；
第二：HiddenHttpMethodFilter必须作用于DispatcherServlet前，才有效果，所有在xml中我们最好按照先配置filter在配置servlet的顺序进行配置
最后一点需要注意的：
在控制类中：
@RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
@ResponseBody
public Msg updateEmpById(Employee employee){
System.out.println("updateEmpById is called:"+employee.toString());
Msg msg = new Msg();
employeeService.updateEmpById(employee);
msg.setCode(100);
msg.setMsg("更新数据成功");
return msg;
}
我们采用PUT方式的请求，springmvc会自动的将提交的参数封装成我们对于的Employee employee对象中的值，但是我们在页面提交的时候没有提交修改联系人的id，这里employee如何获得修改联系人的id了，主要是这个地方
@RequestMapping(value="/update/{empId}"中携带了请求的参数，如果这里empId和实体bean的字段一一对象，springmvc会自动给我们进行封装，这里我们就获得对应的修改联系人的id
@RequestMapping(value="/update/{id}"这里是id，而实体对象中是empId二者不对应，这里spring mvc就不会给我们自动封装了，这里是一个小细节。
当然除了这种方式之外，还可以使用 @ModelAttribute来解决不清楚的看springmvc的视频
我们来看看具体的代码
EmployeeController.java
package com.atguigu.crud.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/**
*
* 处理员工的增删改查操作
* */
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
/**
* 负责将PageInfo对象转化成json对象
* */
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) {
//使用mybatis分页插件 pn表示当前查询的页数，5表示每页显示第几条
System.out.println("EmployeeController is called pn"+pn);
PageHelper.startPage(pn, 5);
//在PageHelper.startPage(pn, 5);后面的查询语句就可以实现分页查询
List<Employee> list = employeeService.getAll();
//我们将查询的结果封装到PageInfo对象之中,5表示右下角导航栏的数目是5
PageInfo info = new PageInfo(list,5);
Msg msg = new Msg();
msg.setCode(100);
msg.setMsg("业务操作成功");
msg.getExtend().put("pageInfo", info);
return msg;
}
/**
* 这里一定要注意采用的resetful风格，请求方式必须是post
* */
@RequestMapping(value="/save",method=RequestMethod.POST)
@ResponseBody
public Msg save(@Valid Employee employee,BindingResult result){
System.out.println("save is calle:"+employee.toString());
//这里首先要判断用户输入的参数是否合法
Map<String,Object> err_map = new HashMap<String, Object>();
Msg msg = new Msg();
if(result.hasErrors()){
List<FieldError> errors = result.getFieldErrors();
for( FieldError error: errors){
System.out.println("错误的字段是："+error.getField());
System.out.println("错误的消息是："+error.getDefaultMessage());
err_map.put(error.getField(), error.getDefaultMessage());
}
msg.setCode(200);
msg.setMsg("员工保存失败");
msg.getExtend().put("err_map", err_map);
}else{
employeeService.save(employee);
msg.setCode(100);
msg.setMsg("保存员工数据成功");
}
return msg;
}
@RequestMapping("/isUserExist")
@ResponseBody
public Msg isUserExist(@RequestParam("empName") String empName){
System.out.println("isUserExist is called:"+empName);
Msg msg = new Msg();
Boolean exits = employeeService.isUserExist(empName);
if(exits){
//200表示联系人已经存在
msg.setCode(200);
}else{
//100表示联系人可用
msg.setCode(100);
}
return msg;
}
//通过id查询到员工的信息，采用resetful风格
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmpById(@PathVariable("id") String id){
System.out.println("getEmpById is called:"+id);
Msg msg = new Msg();
Employee employee = employeeService.getEmpById(id);
msg.setCode(100);
msg.setMsg("查询联系人成功");
msg.getExtend().put("emp", employee);
return msg;
}
//通过id修改联系人,特别需要注意的是这里采用的是PUT的方式
@RequestMapping(value="/update/{empId}",method=RequestMethod.PUT)
@ResponseBody
public Msg updateEmpById(Employee employee){
System.out.println("updateEmpById is called:"+employee.toString());
Msg msg = new Msg();
employeeService.updateEmpById(employee);
msg.setCode(100);
msg.setMsg("更新数据成功");
return msg;
}
}
EmployeeService.java
package com.atguigu.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.EmployeeExample;
import com.atguigu.crud.bean.EmployeeExample.Criteria;
import com.atguigu.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
public List<Employee> getAll(){
List<Employee> list = employeeMapper.selectByExampleWithDept(null);
return list;
}
public void save(Employee employee) {
// TODO Auto-generated method stub
//这里要注意insert和insertSelevite的区别，使用insert将会null字段插入到数据库中。insertselct不会
//现在要实现员工的id自增长，employee中的id字段传递过来的值是null字段，所以不能使用insert，会将null字段插入
employeeMapper.insertSelective(employee);
}
public Boolean isUserExist(String empName) {
// TODO Auto-generated method stub
//采用mybatis的高级查找功能，判断当前用户是否存在
/***
* MyBatis的Mapper接口以及Example的实例函数及详解
* mybatis的逆向工程中会生成实例及实例对应的example，example用于添加条件，相当where后面的部分
xxxExample example = new xxxExample();
Criteria criteria = new Example().createCriteria();
User user = XxxMapper.selectByPrimaryKey(100); //相当于select * from user where id = 100
* */
EmployeeExample example = new EmployeeExample();
Criteria createCriteria = example.createCriteria();
createCriteria.andEmpNameEqualTo(empName);
long countByExample = employeeMapper.countByExample(example);
if(countByExample > 0){
return true;
}else{
return false;
}
}
public Employee getEmpById(String id) {
// TODO Auto-generated method stub
Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id));
return employee;
}
public void updateEmpById(Employee employee) {
// TODO Auto-generated method stub
//这里Employee字段中携带的那些字段的存在值就更新那些字段
//
employeeMapper.updateByPrimaryKeySelective(employee);
}
}
index.sjp
<%@ 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 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">
<title>员工列表</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script>
<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>
<!-- 修改员工信息的对话框 -->
<div class="modal fade" id="updateEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<p class="form-control-static" id="empNameModalUpdate" name="empName"></p>
<span id="name_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil">
<span id="email_span_update" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModalUpdate"class="form-control">
</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 ="saveEmpUpdate">更新</button>
</div>
</div>
</div>
</div>
<!-- 新增员工信息的对话框 -->
<div class="modal fade" id="addEmpModal" 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">
<!-- 实体类的表单,表单项 的name需要给实体bean对象的一一对应起来，springmvc会帮我们自动封装-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name">
<span id="name_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil">
<span id="email_span" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="F"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="genderModal" value="M"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-5">
<select name="dId" id="dIdModal"class="form-control">
</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 ="saveEmp">保存</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="addEmp">新增</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>
<!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典-->
<script type="text/javascript">
//定义一个全局变量，获得当前中的记录数
var total;
//定义一个全局变量，记录当前修改的页面
var currentPage;
$(function(){
//页面加载完毕，去首页获得对应的数据
to_page(1);
});
//使用ajax到后台服务器查询数据
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);
}
});
}
//解析服务器返回的json数据，并在员工表中显示出来
function build_emps_table(result){
//在构建之前先清空所有的数据
$("#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 gender = item.gender == 'M'?"女":"男";
var genderTd = $("<td></td>").append(gender);
var emailTd = $("<td></td>").append(item.email);
var departmentNameTd = $("<td></td>").append(item.department.deptName);
//添加编辑按钮
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//这里我们点击编辑按钮的时候，在弹出编辑对话框之前我们要使用ajax到后台去查询对应的员工的信息，这里需要点击编辑按钮的时候，需要得到被修改员工的id，这里设计的比较巧秒，我们在创建出编辑按钮的时候，给编辑按钮添加一个自定义的属性。该属性值就是员工的id
// 在点击编辑按钮的时候我们就可以通过该属性获得的该员工的id
editBtn.attr("edit_id",item.empId);
//将上面的table表td数据添加到tr中，这里是一个链式操作
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(departmentNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
//"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典
});
}
//解析显示分页信息
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+"条记录");
total = result.extend.pageInfo.total;
currentPage = result.extend.pageInfo.pageNum;
}
//解析右下角的导航栏
function build_page_nav(result){
//page_nav_area
$("#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){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}
//给前一页和首页添加按钮点击事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
//跳转到当前页的前一页
to_page(result.extend.pageInfo.pageNum-1);
});
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
//如果没有下一页不能被点击
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}
//给下一页和尾页添加点击事件
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍历给ul中添加页码提示
$.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(){
//点击的时候重新使用ajax到服务器查询数据
to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮，弹出新增加员工的对话框
$("#addEmp").click(function(){
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#addEmpModal form")[0].reset();
$("#name_span").text("");
$("#empNameModal").parent().removeClass("has-success has-error");
$("#dIdModal").empty();
var parent = $("#dIdModal");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//弹出对话框
$('#addEmpModal').modal({
backdrop:'static'
})
});
//点击保存联系人
$("#saveEmp").click(function(){
//判断当前的联系人是否可用
if( $(this).attr("isUserExist")=="yes"){
return false;
}
//首先判断输入的参数是否满足规则
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/save",
data:$("#addEmpModal form").serialize(),
type:"post",
success:function(result){
//首先需要判断后端返回的结果中，后端对用户的校验结果
//alert(result.extend.err_map.email);
//alert(result.extend.err_map.empName);
//这里需要注意的是如果邮箱格式错误，姓名正确，result.extend.err_map.email中就像携带错误的信息，result.extend.err_map.empName的信息是undefined
if(result.code == 100){
//保存联系人成功需要做下面的几件事情
//第一件事情就是让新建联系人的对话框摸太框消失
$("#addEmpModal").modal('hide');
//第二个跳转到最后一页
//这里如何跳转到最后一页了，mybatis分页插件这里提供了一个功能，例如现在员工总数是100人，每页显示5人，最大的分页数目就是5，你如果输入6
//也是按照最大的5来进行查询。员工的总数肯定是大于最大的分页数目的，现在要查询最后一页的数据，我以员工的总数进行查询
//使用ajax重新再查询下最后一页员工的数目
//
to_page(total);
}else{
alert(result.extend.err_map.email);
//说明邮箱格式错误
if(undefined != result.extend.err_map.email){
alert(result.extend.err_map.email);
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text(result.extend.err_map.email);
}
//说明姓名格式有错误
if(undefined != result.extend.err_map.empName){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text(result.extend.err_map.empName);
}
}
}
});
});
//juqery前台校验数据
//校验表单数据
function validate_add_form(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empNameModal").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if(!regName.test(empName)){
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("姓名格式不正确");
return false;
}else{
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("");
};
//2、校验邮箱信息
var email = $("#emailModal").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("邮箱格式不正确");
return false;
}else{
$("#emailModal").parent().removeClass("has-success has-error");
$("#email_span").text("");
$("#emailModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#email_span").addClass("help-block").text("");
}
return true;
}
//给输入联系人的input添加change事件，判断当前联系人是否可用
$("#empNameModal").change(function(){
//this表示当前操作的对象，是docment类型
//获得当前输入的name的值
var name=$(this).val();
$.ajax({
url:"${APP_PATH}/isUserExist",
type:"post",
data:"empName="+name,
success:function(result){
if(result.code == 200){
//说明该联系人已经在后台存在不可以
//添加元素状态之前。先清空清除当前元素的校验状态
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-error");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人已经存在");
//如果当前联系人已经存在，点击保存联系人案例的时候，就会失败，我们给保存联系人的按钮添加一个自定义属性用来标识当前添加的联系人是否存在
$("#saveEmp").attr("isUserExist","yes");
}else{
//说明该联系人可用
$("#empNameModal").parent().removeClass("has-success has-error");
$("#name_span").text("");
//给当前节点的父元素添加has-error属性
$("#empNameModal").parent().addClass("has-success");
//给span节点添加.help-block属性
$("#name_span").addClass("help-block").text("该联系人可用");
$("#saveEmp").attr("isUserExist","no");
}
}
});
});
//给编辑按钮添加点击事件
$(document).on("click",".edit_btn",function(){
//弹出模态对话框
//首先清空页面的所有数据
//将jquery对象转化成docment对象，调用docment对象的reset方法
$("#updateEmpModal form")[0].reset();
$("#name_span_update").text("");
$("#email_span_update").text("");
$("#empNameModalUpdate").parent().removeClass("has-success has-error");
$("#emailModalUpdate").parent().removeClass("has-success has-error");
$("#dIdModalUpdate").empty();
//发送ajax请求获得对应的部门信息
var parent = $("#dIdModalUpdate");
//使用ajax请求部门的数据
$.ajax(
{
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
//对result数据进行解析添加到
var depts = result.extend.depts;
$.each(depts,function(index,item){
//给option选项设置值应该是deptid
var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId);
parent.append(opt);
});
}
}
);
//使用ajax请求获得对应的员工信息
var emp_id = $(this).attr("edit_id");
//给编辑联系人的对话框中国的更新按钮添加自定义属性，这样在编辑联系人页面中就可以获得被编辑联系人的id
$("#saveEmpUpdate").attr("edit_id",emp_id);
$.ajax(
{
url:"${APP_PATH}/emp/"+emp_id,
type:"GET",
success:function(result){
//在对话框中显示显示姓名 p标签是一个文本使用text
$("#empNameModalUpdate").text(result.extend.emp.empName);
//给邮箱复制，input对话框使用val
$("#emailModalUpdate").val(result.extend.emp.email);
//接下来要让该联系人对应的性别被选中，如何实现了
//首先找到id为updateEmpModal对话框下的name等于gender的input元素。这个元素就是单选框。val中传入的值就是男就是对应的
//男的单选框被选中
$("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]);
$("#updateEmpModal select").val([result.extend.emp.dId]);
}
}
);
//弹出对话框
$('#updateEmpModal').modal({
backdrop:'static'
})
});
//给编辑联系人的保存按钮增加点击事件
$("#saveEmpUpdate").click(function(){
//使用ajax提交数据到后台更新数据这里需要
//强调的是我们采用的是put方式的提交
// data:$("#addEmpModal form").serialize()传递的请求参数中必须携带一个_method
var emp_id = $(this).attr("edit_id");
$.ajax({
url:"${APP_PATH}/update/"+emp_id,
type:"PUT",
data:$("#updateEmpModal form").serialize(),
success:function(result){
//修改联系人成功之后，关闭修改联系人的摸态对话框
if(result.code == 100){
$("#updateEmpModal").modal('hide');
//跳转到当前的修改页面
to_page(currentPage);
}
}
});
});
</script>
</div>
</body>
</html>