Blog

javascript踩坑-js中调用方法时忘记给方法添加括号

调用方法操作：validate_add_form 忘记添加() 了，坑爹啊 ！！！

if(!validate_add_form){
	//校验有误，失败
	return false;
}

方法为：

//校验 添加员工信息 表单 合法性
function validate_add_form(){
	//拿到要校验的数据，使用正则表达式
			
	//1、校验用户信息
	//获取表单值
	var empName = $("#empName_add_input").val();  
	//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
	//校验正则表达式
	if(!regName.test(empName) ){
		// 弹窗校验 太丑 
		//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
		// $("#empName_add_input").addClass("is-invalid");
				
	        show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
		return false;
	}else{
		show_validate_msg("#empName_add_input","success","");
	}
		
	//2、校验邮箱信息
	var email = $("email_add_input").val();
	var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(emial)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }else{
		show_validate_msg("#email_add_input","success","");
	}
		
	return true;
}
		
		
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
	//清除当前元素的校验状态
	$(ele).removeClass("is-invalid is-valid");
	$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
	if("success"==status){
		$(ele).addClass("is-valid");
		$(ele).next("div").addClass("valid-feedback").text(msg);
	}else if("error" == status){
		$(ele).addClass("is-invalid");
		$(ele).next("div").addClass("invalid-feedback").text(msg);
	}
}

 

 

SSM小项目-(8)-添加雇员模块之前端校验和后端校验

之前已经能实现添加雇员的功能了。但是我们还需要进行表单校验。
校验过程概述：

校验流程：
1、首先是前端校验，用户名和 邮箱  正则表达式规则
2、发送 ajax ，校验是否存在 用户名。
====
一、这个时候，出现一种情况：用户名 前端校验成功 满足大于6位，
但是数据库有重复。表单样式，显示错误了，但是还是能够保存。
提交保存按钮，提交前，必须要知道 当前 用户名是否 重名这个标记，
所以，就在每次检测用户名是否重名时，将结果作为保存按钮的属性。

二、如果第一次保存成功，第二次再打开时，信息没有变化，ajax没有去调用是否重复用户名，导致保存的按钮仍是激活的，这样仍能保存。所以，解决办法就是，每次打开清空表单内容。当然，第二次打开表单的时候，也残留了之前的样式，所以也需要清空表单样式。
====
三、 情况是，输入 aaa 发送ajax查询，数据库没有重复，就显示用户名可用。但是一提交，显示 用户名要大于6位 ，用户名提示信息由绿色变成了红色，导致用户无法保存。所以 ajax  请求不仅要查用户名重复，也要查名字 大于6位。 于是在ajax请求查用户名重复的服务器方法中，又添加了校验 用户名格式 的方法。 


四、上面这样做还会出现问题，如果输入aaabbb，告诉用户，用户名已存在，但用户仍点击提交按钮，还是会将表单红色提示的信息，替换成了绿色信息，虽然无法提交，因为保存按钮被冻结了。这种现象是因为，表单提交时，先前端进行了格式化校验，然后查看保存按钮的激活状态，最后发送保存请求。

其中，前端格式化校验，会发现用户名满足大于等于6位的要求，然后将表单信息由原来的用户名已存在红色信息改为了绿色，而格式化校验后，发现保存按钮被禁用，因为用户名重复。原因就在于，前端格式化校验不能同时进行用户名重复，导致红色错误提示被替换成了绿色信息。

解决办法心得：提交表单的时候，先校验 用户名是否是重复 的那个标记值，如果是false就直接返回不提交，这样就跳过了后面在对表单格式进行校验，这样做省的将错误信息：用户名已存在 ，通过表单格式校验 改成 用户名可用的状态。


五、 如果输入用户名张三，发现用户名不可用，就算现在保存按钮被冻结，但也可以禁用或修改js代码，或者修改表单属性，重新激活保存按钮，成功的将表单发送给服务器， 显然这样只能 防君子不防小人。

所以在错误信息发送到服务器时，我们仍要对错误信息进行校验，这就做后端校验。这样做用于校验表单格式和用户名重复两个功能。校验完后，用户要么保存要么不保存，总之都会发送信息给浏览器，告知用户是否保存成功。

校验心得总结：
在关键数据上，前端校验后，还需要后端校验，
jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；前端校验 + 后端校验+ 数据库约束

jsr303校验规则，就是
1、添加jar包
2、变量中 添加定义注解，配置返回值
3、方法中形参 设置 注解和返回值

js表单重置学习：

//如果不请空，下一次请求时，数据会在原来的基础上，不断添加。

function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}

一、前端校验[前端发起的校验]

大白话：

Bootstrap框架中， 表单对象的校验，首先只要给form对象 添加 was–validated 属性就行。此时表单会根据input的type属性，自动校验，比如是否为空，又比如type=email，那么会检查 输入信息是否是email类型。这些是bootstrap，自己添加的。
一般我们不用，我们自己用代码校验并判断 input 是否合法，并给input标签 添加 is-invalid 或 is-valid 属性，来表示是否合法。
表单中的：valid–feedback 和 invalid–feedback 是用来 展示校验结果信息的。

1、js校验表单格式：

遇到前端错误时，可以用 chrome 调试，记得打开开发者模式！

下面是插入 保存时添加校验 方法 ，
但是调用时 validate_add_form 方法忘记加括号了！要修改啊，坑爹。

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	if(!validate_add_form){
		//校验有误，失败
		return false;
	}
		
	//1.将模态框框中的数据提交给服务器进行保存
	//2.方式ajax请求，保存员工
	//alert($("#empAddModal form").serialize());
			
	 $.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功，需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

validate_add_form()方法实现：其中下面代码有错误：

var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(emial)){...}
纠正：【regEmail 不是 regemail，email 不是 emial】

//2、校验邮箱信息 var email = $("email_add_input").val(); 忘记添加#号了
正确的做法是：$("#email_add_input") 坑爹  ！！！

邮箱的正则表达式也写错了，纠正一下：
      var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

//校验 添加员工信息 表单 合法性
function validate_add_form(){
	//拿到要校验的数据，使用正则表达式
			
	//1、校验用户信息
	//获取表单值
	var empName = $("#empName_add_input").val();  
	//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	//校验正则表达式
	if(!regName.test(empName) ){
		// 弹窗校验 太丑 
		//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
		// $("#empName_add_input").addClass("is-invalid");
				
	        show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
		return false;
	}else{
		show_validate_msg("#empName_add_input","success","");
	}
		
	//2、校验邮箱信息
	var email = $("email_add_input").val();
	var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(emial)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }else{
		show_validate_msg("#email_add_input","success","");
	}
		
	return true;
}
		
		
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
	//清除当前元素的校验状态
	$(ele).removeClass("is-invalid is-valid");
	$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
	if("success"==status){
		$(ele).addClass("is-valid");
		$(ele).next("div").addClass("valid-feedback").text(msg);
	}else if("error" == status){
		$(ele).addClass("is-invalid");
		$(ele).next("div").addClass("invalid-feedback").text(msg);
	}
}

2、js校验用户名是否重复

(1)添加表单变化监听事件：

index.jsp

//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
$("#empName_add_input").change(function(){
	//发送 ajax 请求，校验 用户名 是否可用。
	var empName = this.value;
	$.ajax({
		url:"${APP_PATH}/checkUser",
		type:"POST",
		data:"empName="+empName,
		success:function(result){
			if(result.code==100){
				show_validate_msg("#empName_add_input","success","用户名可用");
				$("#emp_add_save_btn").attr("ajax-check-user","success");
			}else{
				show_validate_msg("#empName_add_input","error",result.extend.user_msg)
				$("#emp_add_save_btn").attr("ajax-check-user","error");	
			}
		}
				
	});
});

EmployeeController.java

/**
 * 检查用户名是否可用
 * 
 * @param empName
 * @return
 */
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
	
	boolean b = employeeService.checkUser(empName);
	if (b)
		return Msg.success().add("user_msg","用户名可用");
	else
		return Msg.fail().add("user_msg", "用户名不可用");
}

EmployeeService.java

/**
 * 检验用户名是否可用
 * 
 * @param empName
 * @return true:代表当前姓名可用 false:代表不可用
 */
public boolean checkUser(String empName) {

	EmployeeExample example = new EmployeeExample();
	Criteria criteria = example.createCriteria();
	criteria.andEmpNameEqualTo(empName);
	// 按照条件，统计符号条件的记录数
	long count = employeeMapper.countByExample(example);
	return count==0;
}

(2)添加模态框的重复性标记

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	//alert("校验测试");
			
	//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
	if($(this).attr("ajax-check-user")=="error"){
		return false;
	}
.....

}

3、重新打开模态框bug

需要：

function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}

4、在校验用户名重复中添加用户名格式校验

在EmployeeController.java中：

/**
 * 检查用户名是否可用
 * 
 * @param empName
 * @return
 */
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
	// 先判断用户名是否是合法的表达式;
	String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
	if (!empName.matches(regx)) {
		return Msg.fail().add("user_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");
	}

	boolean b = employeeService.checkUser(empName);
	if (b)
                return Msg.success().add("user_msg","用户名可用");
	else
		return Msg.fail().add("user_msg", "用户名不可用");
}

5、前端校验顺序调整

避免表单样式由红色错误信息变成绿色

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	//alert("校验测试");
			
	//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
	if($(this).attr("ajax-check-user")=="error"){
		return false;
	}
			
	//2、前端校验表单格式
	if(!validate_add_form()){
		//校验有误，失败
		return false;
	}
			
		
	//发送ajax请求，如果前端校验被修改了，比如禁用js，修改js代码等
        //这时候需要后端校验，并将结果返回给浏览器	
	.....
			
});

二、对浏览器表单数据进行后端校验

1、导入jsr303校验规则的jar包，即在pom.xml中添加

<!--JSR303数据校验支持；tomcat7及以上的服务器， tomcat7以下的服务器：用的是旧的el.jar包，el表达式是旧标准的 ，需要额外给服务器的lib包中替换新的标准的el.jar包 -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
	<groupId>org.hibernate</groupId>
	<artifactId>hibernate-validator</artifactId>
	<version>5.4.1.Final</version>
</dependency>

2、对校验对象，添加注解

在Employee.java中：

package com.ssm.crud.bean;

import javax.validation.constraints.Pattern;

import org.hibernate.validator.constraints.Email;

public class Employee {
    private Integer empId;
    /***
    //jsr303校验规则
    //@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})",message="")  
     * 这里的 \u3333 [3333是为了不报错才添加的]
     * java表达式是认识的 但是严格点还是要 \\u
    ***/
    @Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",message="用户名必须是6-16位数字和字母的组合或者2-5位中文")
    private String empName;

    private String gender;

    //jsr303校验规则
    //@Email 直接用这个注解也够了
    //@Pattern(regexp="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$",message="")
    //在正则表达式中 \ 就是转义的，然后再java中 \ 也是转义的，所以需要java中的 \\ 来表示正则表达式中的一个 \
    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确")
    private String email;

    private Integer dId;

    public Integer getEmpId() {
        return empId;
    }

    public void setEmpId(Integer empId) {
        this.empId = empId;
    }

    public String getEmpName() {
        return empName;
    }

    public void setEmpName(String empName) {
        this.empName = empName == null ? null : empName.trim();
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender == null ? null : gender.trim();
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email == null ? null : email.trim();
    }

    public Integer getdId() {
        return dId;
    }

    public void setdId(Integer dId) {
        this.dId = dId;
    }
    
    //添加 Department 属性，用于关联查询
    private Department department;

	public Department getDepartment() {
		return department;
	}

	public void setDepartment(Department department) {
		this.department = department;
	}


	//生成自定义构造器 ，顺便 附带 无参构造器
	public Employee(Integer empId, String empName, String gender, String email, Integer dId) {
		super();
		this.empId = empId;
		this.empName = empName;
		this.gender = gender;
		this.email = email;
		this.dId = dId;
	}

	public Employee() {
		super();
	}

	@Override
	public String toString() {
		return "Employee [empId=" + empId + ", empName=" + empName + ", gender=" + gender + ", email=" + email
				+ ", dId=" + dId + ", department=" + department + "]";
	}
	
	
	
}

（3）方法形参中启用

在EmployeeController.java中：

/**
 * 员工保存
 * 1、支持JSR303校验
 * 2、导入Hibernate-Validator
 * 3、在bean的属性中 添加校验注解
 * 4、在调用方法参数中，写上 @Valid 启用校验功能，BindingResult 设置校验结果返回
 * @return
 */
@ResponseBody
@RequestMapping(value = "/emp", method = RequestMethod.POST)
public Msg saveEmpWithJson(@Valid Employee employee ,BindingResult result) {
	if(result.hasErrors())
	{
		//校验失败，应该返回失败，在模态框中显示校验失败的错误信息
		Map<String, Object> map = new HashMap<>();
		List<FieldError> errors = result.getFieldErrors();
		for (FieldError fieldError : errors) {
			System.out.println("错误的字段名："+fieldError.getField());
			System.out.println("错误信息："+fieldError.getDefaultMessage());
			map.put(fieldError.getField(), fieldError.getDefaultMessage());
		}
		return Msg.fail().add("errorFields", map);
	}
	else {
		System.out.println(employee);
		employeeService.saveEmp(employee);
		return Msg.success();

	}
		
}

三、前端页面代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:8080)；需要加上项目名
		http://localhost:8080/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="ml-auto mr-5">
				<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
					<i class="icon-file-alt icon-large"></i>  新增
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>
		
		<div class="text-center">
		<h5>测试列表</h5>
		</div>
		
		<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  placeholder="empName">
      <div class="invalid-feedback"> 用户名错误，请输入6-16个英文或2-5汉字。  </div>
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </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">
		//定义 全局变量，总记录数
		var totalRecords ;
	
		//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
		$(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() {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=1",
				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) {
			//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				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);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleteBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                deleteBtn.attr("delete-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(deleteBtn)
				.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+"记录")
		     
					totalRecords = 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>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum -1);
				});
			}
			
			//遍历页码号1,2，3等，给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").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);
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		
		//情况表单信息 方法
		function reset_form(ele){
			
			//重置表单内容
			$(ele)[0].reset();
			
			//清空表单样式
			$(ele).find("*").removeClass("is-invalid is-valid");
			$(ele).find(".valid-feedback .invalid-feedback").text("");
			}
		
		//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
		$("#emp_add_modal_btn").click(function(){
			
			//清除表单数据（表单完整重置（表单的数据，表单的样式））
			reset_form("#empAddModal form");
			
			//发送ajax请求，弹出部门信息，显示在下拉列表中
			getDepts();
			
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		function getDepts(){
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					console.log(result);
	                //显示部门信息，在下拉列表中
	                // $("#dept_add_select") 换一种找法
	                //$("#empAddModal select")
	                
	                //清除之前留下的 option 标签
	                $("#empAddModal select").empty();
	                $.each(result.extend.depts,function(){
	                	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	                    optionEle.appendTo("#empAddModal select");
	                });
				}
			});
		}
		
	
		
		//添加模态框 保存事件
		$("#emp_add_save_btn").click(function(){
			
			//alert("校验测试");
			
			//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
			if($(this).attr("ajax-check-user")=="error"){
				return false;
			}
			
			//2、前端校验表单格式
			if(!validate_add_form()){
				//校验有误，失败
				return false;
			}
			
		
			
			//1.将模态框框中的数据提交给服务器进行保存
			//2.方式ajax请求，保存员工
			//alert($("#empAddModal form").serialize());
			
		  $.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(), 
				success:function(result){
					//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
					console.log(result);
					//alert(result.msg);
					if(result.code==100)
					{
						//1、员工保存成功，需要关闭模态框。
						$("#empAddModal").modal("hide");
						//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
						to_page(totalRecords);
					}else{
						//显示失败信息
						//console.log(result);
						//有哪个字段的错误信息，就显示哪个字段
						//alert(result.extend.errorFileds.email);
						//alert(result.extend.errorFileds.empName);
		                if(undefined!=result.extend.errorFileds.email){
		                	//显示邮箱错误信息
		    				show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
		                }
		                if(undefined!=result.extend.errorFileds.empName){
		                	//显示员工名字错误信息
		    				show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
		                }
						
					}
					
					
				}
			}); 
			
		});
		
		
		//校验 添加员工信息 表单 合法性
		function validate_add_form(){
			//拿到要校验的数据，使用正则表达式
			
			//1、校验用户信息
			//获取表单值
			var empName = $("#empName_add_input").val();  
			//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
			//一开始正则表达式写错了，导致两个中文的名字无法保存 ，关键就是大括号的位置啊
			//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;

		    //校验正则表达式
			if(!regName.test(empName) ){
				// 弹窗校验 太丑 
				//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
			   // $("#empName_add_input").addClass("is-invalid");
				
			   show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
			   return false;
			}else{
			   show_validate_msg("#empName_add_input","success","");
			}
		
			//2、校验邮箱信息
			var email = $("#email_add_input").val();
			// 正则表达式 看花眼了啊 少了 一个 [
			//var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		      var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

			if(!regEmail.test(email)){
				// 弹窗校验 太丑 
		    	//alert("邮箱格式不正确");
				//$("#email_add_input").addClass("is-invalid");
				
				show_validate_msg("#email_add_input","error","邮箱格式不正确");
		    	return false;
		    }else{
				show_validate_msg("#email_add_input","success","");
		    }
		
			return true;
		}
		
		
		//显示校验结果的提示信息
		function show_validate_msg(ele,status,msg){
			//清除当前元素的校验状态
			$(ele).removeClass("is-invalid is-valid");
			$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
			if("success"==status){
				$(ele).addClass("is-valid");
				$(ele).next("div").addClass("valid-feedback").text(msg);
			}else if("error" == status){
				$(ele).addClass("is-invalid");
				$(ele).next("div").addClass("invalid-feedback").text(msg);
			}
		}
		
		
		//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
		$("#empName_add_input").change(function(){
			//发送 ajax 请求，校验 用户名 是否可用。
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkUser",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success","用户名可用");
					    $("#emp_add_save_btn").attr("ajax-check-user","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.user_msg)
					    $("#emp_add_save_btn").attr("ajax-check-user","error");	
					}
				}
				
			});
		});
		
	</script>

</body>
</html>

三、校验模块改进

（1）基本想法：

1、先前端校验-再后端校验

2、每个校验模块中都有校验优先顺序。
【根据具体情况判断，比如校验单个表单元素时，先本地后服务器，减少服务器压力，提交表单时，先判断之前服务器传回来的校验结果，然后再进行前端验证。】

2、表单变化时，应该用前端校验，表单提交时用后端校验。

（2）具体方法：

1、抽取了单个表单对象的校验方法，定义了全局变量【校验正则表达式，校验展示信息】

2、对每个表单对象，一旦变化就进行单独校验。

3、提交表单时，先判断之前服务器传回来的校验结果，然后再进行前端校验。

4、表单提交后，在进行服务端校验。

（3）修改后的网页代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:8080)；需要加上项目名
		http://localhost:8080/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="ml-auto mr-5">
				<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
					<i class="icon-file-alt icon-large"></i>  新增
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>
		
		<div class="text-center">
		<h5>测试列表</h5>
		</div>
		
		<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  placeholder="empName">
      <div class="invalid-feedback"> 用户名错误，请输入6-16个英文或2-5汉字。  </div>
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </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">
		//定义 全局变量，总记录数
		var g_totalRecords ;
		var g_empName_reg =  /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	    var g_empName_valid ="用户名可用";
	    var g_empName_invalid_format = "用户名可以是2-5位中文或者6-16位英文和数字的组合";
	    var g_empName_invalid_exist = "用户名已存在";
	    
		var g_email_reg =  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	    var g_email_valid = "";
	    var g_email_invalid_format="邮箱格式不正确";
	    
	    
	    //获取表单值
		//var empName = $("#empName_add_input").val();  
		//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
		       //一开始正则表达式写错了，导致两个中文的名字无法保存 ，关键就是大括号的位置啊
		       //var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
		//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	    //show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");

		
		//校验邮箱信息
		//var email = $("#email_add_input").val();
		      // 正则表达式 看花眼了啊 少了 一个 [
		      //var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	    //  var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;  
	    // show_validate_msg("#email_add_input","error","邮箱格式不正确");
	    
		
		//表单内容和样式重置方法
		function reset_form(ele){
			//重置表单内容
			$(ele)[0].reset();
			
			//清空表单样式
			$(ele).find("*").removeClass("is-invalid is-valid");
			$(ele).find(".valid-feedback .invalid-feedback").text("");
			}
		
		
		//校验表单元素  参数：元素 和 正则表达式 ,提示信息
		function validate_form_ele(ele,reg,tip_success,tip_error){
			//拿到要校验的数据，使用正则表达式
			var ele_value = $(ele).val();
	       if( reg.test(ele_value)){
	    	   show_validate_msg(ele,"success",tip_success);
	    	   return true;
	       }else{
	    	   show_validate_msg(ele,"error",tip_error);
	    	   return false;
	       }
		}
		
		//显示校验结果的提示信息
		function show_validate_msg(ele,status,msg){
			//清除当前元素的校验状态
			$(ele).removeClass("is-invalid is-valid");
			$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
			if("success"==status){
				$(ele).addClass("is-valid");
				$(ele).next("div").addClass("valid-feedback").text(msg);
			}else if("error" == status){
				$(ele).addClass("is-invalid");
				$(ele).next("div").addClass("invalid-feedback").text(msg);
			}
		}
		
		
		//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
		$(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) {
			//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				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);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                delBtn.attr("del-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(delBtn)
				.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+"记录")
		     
					g_totalRecords = 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>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum -1);
				});
			}
			
			//遍历页码号1,2，3等，给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").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);
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		/********************加载网页模块结束*********************/

		
		
        /********************添加用户信息模块*********************/
        
		//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
		$("#emp_add_modal_btn").click(function(){
			
			//清除表单数据（表单完整重置（表单的数据，表单的样式））
			reset_form("#empAddModal form");
			
			//发送ajax请求，弹出部门信息，显示在下拉列表中
			getDepts();
			
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		function getDepts(){
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					console.log(result);
	                //显示部门信息，在下拉列表中
	                // $("#dept_add_select") 换一种找法
	                //$("#empAddModal select")
	                
	                //清除之前留下的 option 标签
	                $("#empAddModal select").empty();
	                $.each(result.extend.depts,function(){
	                	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	                    optionEle.appendTo("#empAddModal select");
	                });
				}
			});
		}
		
	
		
		//添加模态框 保存事件
		$("#emp_add_save_btn").click(function(){
			
			//alert("校验测试");
			
			//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
			if($(this).attr("ajax-check-user")=="error"){
				return false;
			}
			
	
			if(! validate_form_ele("#empName_add_input",g_empName_reg,
					g_empName_valid,g_empName_invalid_format))	
				return false;
		
			if(! validate_form_ele("#email_add_input",g_email_reg,
					g_email_valid,g_email_invalid_format))	
				return false;
			
			//1.将模态框框中的数据提交给服务器进行保存
			//2.方式ajax请求，保存员工
			//alert($("#empAddModal form").serialize());
			
		  $.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(), 
				success:function(result){
					//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
					console.log(result);
					//alert(result.msg);
					if(result.code==100)
					{
						//1、员工保存成功，需要关闭模态框。
						$("#empAddModal").modal("hide");
						//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
						to_page(g_totalRecords);
					}else{
						//显示失败信息
						//console.log(result);
						//有哪个字段的错误信息，就显示哪个字段
						//alert(result.extend.errorFileds.email);
						//alert(result.extend.errorFileds.empName);
		                if(undefined!=result.extend.errorFileds.email){
		                	//显示邮箱错误信息
		    				show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
		                }
		                if(undefined!=result.extend.errorFileds.empName){
		                	//显示员工名字错误信息
		    				show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
		                }
						
					}
					
					
				}
			}); 
			
		});
		
		
		//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断，自定义属性留个记号，让保存按钮可用来判断 后端校验情况。
		$("#empName_add_input").change(function(){
			
			if(! validate_form_ele("#empName_add_input",g_empName_reg,
					g_empName_valid,g_empName_invalid_format))	
				return false;
		
			
			//发送 ajax 请求，校验 用户名 是否可用。
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkUser",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success",g_empName_valid);
					    $("#emp_add_save_btn").attr("ajax-check-user","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.user_msg)
					    $("#emp_add_save_btn").attr("ajax-check-user","error");	
					}
				}
				
			});
		});
		
		//校验 email框
		$("#email_add_input").change(function(){
			//校验表单
			validate_form_ele("#email_add_input",g_email_reg,g_email_valid,g_email_invalid_format)
					
			});
		
		
	</script>

</body>
</html>

 

 

 

 

 

 

SSM小项目-(7)-添加雇员模块功能实现

一、明确需求

保存 Employee对象 ：
需要 empName email gender dId   Id(因为是自增的所以不需要)

明确使用 rest 风格的操作方式 ：
/depts  请求url
post 请求方式
数据存放在表单中，然后给springmvc  pojo 赋值到bean中。

二、实现添加用户模态框

1、在原来的添加用户按钮上绑定事件

原来的按钮：

<!-- 按钮 -->
<div class="row">
	<div class="ml-auto mr-5">
		<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
			<i class="icon-file-alt icon-large"></i>  新增
		</button>
		<button class="btn btn-danger btn-sm">
			<i class="icon-trash icon-large"></i> 删除
		</button>
	</div>
</div>

js绑定事件：

//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
	//发送ajax请求，弹出部门信息，显示在下拉列表中
	getDepts();
			
	//弹出模态框，static 代表 点击模态框 外面也不能关闭 模态框
	$("#empAddModal").modal({
		backdrop:"static"
	});
});

getDepts()方法是为了从服务器端获取，部门以便在下拉框中填充。

function getDepts(){
	$.ajax({
		url:"${APP_PATH}/depts",
		type:"GET",
		success:function(result){
			console.log(result);
	        //显示部门信息，在下拉列表中
	        // $("#dept_add_select") 换一种找法
	        //$("#empAddModal select")
                
                 //清除之前留下的 option 标签
                  $("#empAddModal select").empty();

	          $.each(result.extend.depts,function(){
	               var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	               optionEle.appendTo("#empAddModal select");
	           });
	       }
	});
}

2、服务器返回部门信息

新建 DepartmentController.java

package com.ssm.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssm.crud.bean.Department;
import com.ssm.crud.service.DepartmentService;
import com.ssm.crud.util.Msg;

@Controller
public class DepartmentController {

	@Autowired
    DepartmentService departmentService;
	
	@ResponseBody
	@RequestMapping("/depts")
	public Msg getDepts(){
	    return Msg.success().add("depts", departmentService.getAll()) ;
	}
	
}

新建DepartmentService.java

package com.ssm.crud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ssm.crud.bean.Department;
import com.ssm.crud.mapper.DepartmentMapper;

@Service
public class DepartmentService {

	@Autowired
	DepartmentMapper departmentMapper;
	
	public List<Department> getAll(){
		
		return departmentMapper.selectByExample(null);
	}
	
}

Msg.java 之前已经提到过了

package com.ssm.crud.util;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回的类
 * 
 * @author lfy
 * 
 */
public class Msg {
	//状态码   100-成功    200-失败
	private int code;
	//提示信息
	private String msg;
	
	//返回给浏览器的数据
	private Map<String, Object> extend = new HashMap<String, Object>();

	public static Msg success(){
		Msg result = new Msg();
		result.setCode(100);
		result.setMsg("处理成功！");
		return result;
	}
	
	public static Msg fail(){
		Msg result = new Msg();
		result.setCode(200);
		result.setMsg("处理失败！");
		return result;
	}
	
	public Msg add(String key,Object value){
		this.getExtend().put(key, value);
		return this;
	}
	
	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public Map<String, Object> getExtend() {
		return extend;
	}

	public void setExtend(Map<String, Object> extend) {
		this.extend = extend;
	}
	
	
}

3、新建模态框并整合部门信息

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  value="empName">
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" value="[email protected]">
    </div>
  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

前面已经在js中 ，将ajax返回的结果填入到了select标签中了：如下

$.each(result.extend.depts,function(){
	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	 optionEle.appendTo("#empAddModal select");
  });

三、实现保存员工功能

1、前端部分：用js给保存按钮添加ajax事件：

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	
			
	//1.将模态框框中的数据提交给服务器进行保存
	//方式ajax请求，保存员工
	//alert($("#empAddModal form").serialize());
			
	$.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功，需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

特别提醒：js中  totalRecords 变量，是在 js代码一开始就有的

<script type="text/javascript">
	//定义 全局变量，总记录数
	var totalRecords ;
	
	//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
	$(function(){
		//去首页
		to_page(1);
	});
  。。。

然后在 显示页面信息时，被赋值：

$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
					"页，总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"记录")
		     
					totalRecords = result.extend.pageInfo.total;

最后，在因为保存员工信息，跳转时，跳转到 最大记录数页：PageHelp 自动过滤最大页数

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
			
	//1.将模态框框中的数据提交给服务器进行保存
	//方式ajax请求，保存员工
	//alert($("#empAddModal form").serialize());
			
	$.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功，需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

2、后端部分：

EmployeeController.java  【核心代码】

@Autowired
EmployeeService employeeService;

/**
 * 员工保存
 * 
 * @return
 */
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public  Msg saveEmpWithJson(Employee employee){
	System.out.println(employee);
	employeeService.saveEmp(employee);
	return Msg.success();
}

EmployeeService.java【核心代码】

@Autowired
EmployeeMapper employeeMapper;

public void saveEmp(Employee employee) {
        //下面这个方法 是全部插入 ,包括 连自增的id 都是
	//employeeMapper.insert(employee);
	//下面这个方法是 有选择的插入，自增Id 被忽略 不会插入。
	employeeMapper.insertSelective(employee);
}

 

jsp踩坑-代码被 注释了还能解析运行

在 jsp网页中：我写了下面这个调转，但是被注释了。

<body>
<!-- 
<jsp:forward page="/emps"></jsp:forward>   
 --> 
</body>

 后来没有想到，jsp页面居然仍可以直接跳转，以后要注意了。

在jsp中，采用<!–   –>注释代码：

1、浏览器还是会解析注释中的代码，

2、注释的代码对于用户是可见的。

所以应该采用<%–  –%>来注释代码。

javascript踩坑-ajax请求中，请求参数将data写成了date

坑爹现场：

 $.ajax({
	url:"${APP_PATH}/emp",
	type:"POST",
	date:$("#empAddModal form").serialize(), 
	success:function(result){
	alert(result);
	}
});

应该要把date 改成 data，这个别忘记了。

补充：

JQuery提供的Ajax方法：

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

原生js实现Ajax方法：

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

注释：

1. open(method, url, async) 方法需要三个参数:

method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

  • 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
  • 1: 服务器连接已建立（open方法已经被调用）
  • 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
  • 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
  • 4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

参考：https://www.cnblogs.com/colima/p/5339227.html

html辨析-HTML元素的ID和Name属性的区别

大白话:html中的id属性是用来标记元素的，name属性主要是用于表单提交时传递赋值的。 

上周我也遇到了ID和Name的问题，在页面里输入了一个input type=”hidden”，只写了一个ID=’SliceInfo’，赋值后submit，在后台用Request.Params[“SliceInfo”]却怎么也去不到值。后来恍然大悟因该用Name来标示，于是在input里加了个Name=’SliceInfo’，就一切ok了。

ID就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
用途2: HTML元素Input type=’radio’分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
用途3: 建立页面中的锚点，我们知道<a href=”URL”>link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name=”PageBottom”></a>，我们就获得了一个页面锚点。
用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap=”#name”(被关联的MAP元素的Name)。
用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = “appletParameter” VALUE = “value”>或Meta中<META NAME = “Author” CONTENT = “Dave Raggett”>。

 

当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = “…”来添加其Name，而必须在创建Element时，使用document.createElement(‘<element name = “myName”></element>’)为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。

<script language="JavaScript">
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
</script>

消息框里显示的结果是：<INPUT id=myId>。

<script language="JavaScript">
var input = document.createElement('<INPUT name="myName">');
input.id = 'myId';
alert(input.outerHTML);
</script>

消息框里显示的结果是：<INPUT id=myId name=myName>。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

另一个网友提到说：
楼主上面的方法我以前也用过，但是document.createElement(‘<INPUT name=”myName”>’);是不符合W3C规范的，在某些浏览器上被人为是错误。用setAttribute处理DOM创建的对象name属性后，用outerHTML看确实是没有name属性，但是在用form提交后name属性却有效。但是对于iframe的name属性就不行了，在提交一个target属性指向了iframe的name值的form对象后，并没有在iframe中显示，而是弹出了一个新页面。这点还希望大家想想如何去解决。是DOM代码即符合W3C规范，又适应各种浏览器。

这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

来自：http://www.cnblogs.com/birdshome/archive/2005/01/31/html_id_name.html

JQuery踩坑-jQuery中引用对象Id忘记添加#

jQuery中引用对象Id忘记添加#

//添加模态框的事件  emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
	alert("好好");
	$("empAddModal").modal({
		backdrop:"static"
	});
});

上面这个$("empAddModal")写错了，应该是$("#empAddModal")  坑爹啊 ！！！

我这里用的是bootstrap框架，点击按钮，调用模态框。

在校验代码时，也忘记 # 了。        var email = $("email_add_input").val();

//2、校验邮箱信息
var email = $("email_add_input").val();
var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
       if(!regEmail.test(email)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }

 

javascript踩坑-append方法遇到字符串内部含有回车符

在网页中：JavaScript代码中，我在字符串 “页，总”内部添加了一个 回车符号，导致 无法解析字符串了 ，需要记住一下。

//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
					"页，总共"+result.extend.pageInfo.pages+"页
					,总"+result.extend.pageInfo.total+"记录")
		}

 

SSM小项目-(6)-前端交互基于ajax请求方案

一、数据交互用的是json

所以springmvc 需要导入Jackson.jar 包，这样才能返回json数据。
Maven构建的项目，操作如下：在pom.xml中添加：

<!-- 返回json字符串的支持 -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.8.8</version>
</dependency>

实际加载的jar包如下：
jackson-annotations.jar
jackson-core.jar
jackson-databind.jar

二、编辑后端

消息对象：Msg.java

package com.ssm.crud.util;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回的类
 * 
 * @author lfy
 * 
 */
public class Msg {
	//状态码   100-成功    200-失败
	private int code;
	//提示信息
	private String msg;
	
	//返回给浏览器的数据
	private Map<String, Object> extend = new HashMap<String, Object>();

	public static Msg success(){
		Msg result = new Msg();
		result.setCode(100);
		result.setMsg("处理成功！");
		return result;
	}
	
	public static Msg fail(){
		Msg result = new Msg();
		result.setCode(200);
		result.setMsg("处理失败！");
		return result;
	}
	
	public Msg add(String key,Object value){
		this.getExtend().put(key, value);
		return this;
	}
	
	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public Map<String, Object> getExtend() {
		return extend;
	}

	public void setExtend(Map<String, Object> extend) {
		this.extend = extend;
	}
	
	
}

EmployeeController.java

package com.ssm.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssm.crud.bean.Employee;
import com.ssm.crud.mapper.EmployeeMapper;
import com.ssm.crud.service.employeeService;
import com.ssm.crud.util.Msg;

@Controller
public class EmployeeController {

	@Autowired
	employeeService employeeService;

	@Autowired
	EmployeeMapper employeeMapper;

	@RequestMapping("/emps")
	@ResponseBody
	public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
		
		// 引入PageHelper分页插件
		//设置返回查询结果的排序规律(字段名 排序规律)
		PageHelper.orderBy("emp_id asc");
		// 在查询之前只需要调用，传入页码，以及每页的大小
		PageHelper.startPage(pn, 5);
		// startPage后面紧跟着的这个查询操作就是一个分页查询操作
		List<Employee> emps = employeeService.getAll();

		// 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
		// 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数
		PageInfo<Employee> page = new PageInfo<Employee>(emps, 5);
		
        return Msg.success().add( "pageInfo" , page);		
	}
}

三、编辑前端

index.jsp

前端首先是 加载html 标签，然后加载 JavaScript 语句。
js执行过程分三步：1、加载 table 数据 2、加载分页信息  3、加载分页栏。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 offset-md-8">
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</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请求，拿到分页数据
	
		//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
		$(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() {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=1",
				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) {
			//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				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);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleteBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                deleteBtn.attr("delete-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(deleteBtn)
				.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+"记录")
		}
		
		//解析显示分页条
		function build_page_nav(result) {
			//page_nav_area
			//请空之前的分页条，如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
			$("#page_nav_area").empty();
			
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum -1);
				});
			}
			
			//遍历页码号1,2，3等，给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").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);
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
	</script>

</body>
</html>