接上一节。
具体流程：我们在index.jsp在中，点击新增按钮，弹出添加员工信息模态框，同时，我们发送ajax请求从数据库中获取部门信息，新增时可以选择部门。输入完毕信息后，在发送请求完成保存操作。
首先是添加了模态框和add.js之后的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> <% pageContext.setAttribute("APP_PATH",request.getContextPath()); %> <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </head> <body> <!-- 模态框 --> <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">员工添加</h4> </div> <div class="modal-body"> <!-- 新增表单 --> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName"/> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">email</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="email_add_input" placeholder="123@qq.com"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">gender</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_add_input" value="F"> 女 </label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">deptName</label> <div class="col-sm-4"> <select name="dId" class="form-control" id="dept_add_select"></select> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="emp_save">保存</button> </div> </div> </div> </div> <div class="container"> <!-- 标题 --> <div class="row"> <div class="col-md-12"> <h1>SSM-CURD</h1> </div> </div> <!-- 按钮--> <div class="row"> <div class="col-md-4 col-md-offset-10"> <button class="btn btn-primary" id="emp_add_modal_btn">新增</button> <button class="btn btn-danger">删除</button> </div> </div> <!-- 表格 --> <div class="row"> <div class="col-md-12"> <table class="table table-hover" id="emps_tables"> <thead> <tr> <th>#</th> <th>epmName</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" src="${APP_PATH}/static/myjs/list.js" ></script> <script type="text/javascript" src="${APP_PATH}/static/myjs/add.js" ></script> </body> </html>
add.js用于发送ajax请求。
然后是add.js中：
//点击新增弹出模态框 $("#emp_add_modal_btn").click(function(){ //发送ajax请求，查出部门信息显示下拉列表 //reset_form("#empAddModal form"); getDepts("#empAddModal select"); $("#empAddModal").modal({ backdrop:"static" }); }); //查询所有部门信息 function getDepts(ele){ $(ele).empty(); $.ajax({ url:"/curd_ssm/depts", type:"GET", success:function(result){ //console.log(result); $.each(result.extend.depts,function(){ var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId); optionEle.appendTo(ele); }); } }); } $("#emp_save").click(function(){ alert($("#empAddModal form").serialize()); $.ajax({ url:"/curd_ssm/emp", type:"POST", data:$("#empAddModal form").serialize(), success:function(result){ //关闭模态框，转到最后一页 $("#empAddModal").modal('hide'); to_page(totalRecord); //alert(result.msg); } }); });
还要新建DeparmentController.java、DepartmentService、DepartmentServiceImpl用于获取部门信息，相关文件如下：
DepartmentController.java
package com.gong.curd.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.gong.curd.bean.Department; import com.gong.curd.service.DepartmentService; import com.gong.curd.utils.Msg; @Controller public class DepartmentController { @Autowired private DepartmentService departmentService; @ResponseBody @RequestMapping("/depts") public Msg getDepts() { List<Department> list = departmentService.getAllDepts(); return Msg.success().add("depts", list); } }
DepartmentService.java
package com.gong.curd.service; import java.util.List; import com.gong.curd.bean.Department; public interface DepartmentService { public List<Department> getAllDepts(); }
DepartmentServiceImpl.java
package com.gong.curd.serviceImpl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.gong.curd.bean.Department; import com.gong.curd.dao.DepartmentMapper; import com.gong.curd.service.DepartmentService; @Service public class DepartmentServiceImpl implements DepartmentService{ @Autowired private DepartmentMapper departmentMapper; public List<Department> getAllDepts() { return departmentMapper.selectByExample(null); } }
最后我们需要修改EmployeeController.java
@ResponseBody @RequestMapping(value="/emp",method=RequestMethod.POST) public Msg saveEmp(Employee employee) { employeeService.save(employee); return Msg.success(); }
EmployeeService.java
public void save(Employee employee);
EmployeeServiceImpl.java
@Override public void save(Employee employee) { employeeMapper.insertSelective(employee); }
启动服务器：点击新增按钮
输入相关信息：
点击保存：
相关信息成功被添加。下一节进行添加信息的相关验证。
天天呆在家，好无聊啊。。。。