点击保存之后，将填写的员工信息直接插入到员工表里面。
1、首先给保存按钮绑定点击事件。
给保存按钮加上一个id
emp_save_btn
在script里面定义方法：
//绑定模态框里面的保存按钮的点击事件。
$("#emp_save_btn").click(function (){
});
这点击保存按钮触发的逻辑：
将模态框里面填写的内容提交给服务器进行保存。
假设服务器的控制器里面有个控制方法。
在EmployeeController里面定义方法：
但是我们在控制器方法的头上写注解@RequestMapping里面的value请求路径的时候。我们使用RESTFul风格。
规定URI的写法：
1、
发送的请求是：
/emp/{id} GET 查询某个id的员工
2、
发送的请求是：
/emp POST 新增某个员工
3、
/emp/{id} PUT 修改某个员工
4、
/emp/{id} DELETe 删除某个员工
所以，现在我们准备实现的是：添加某个员工的数据。
发送的请求是：/emp
请求方式是：POST
这个就代表添加员工。（员工保存）
mybatis自动生成的接口方法：
insert和insertSelective区别：
insert：连id都要设置。
insertSelective：有选择性的插入数据。有些字段可以是null。比如在数据库里面id设置的是自增的属性。
1、EmployeeService方法：
2、EmployeeController：
3、写点击模态框里面的保存按钮触发的绑定事件：（关键）
这里是发起ajax请求，将模态框里面写的一些数据进行提交到服务器的控制器方法。作为参数拿到，然后拿参数，去和DB进行交互。
现在需要拿到模态框里面的数据。使用jQuery提供的方法：
有了这个方法就非常方便拿到我们在模态框里面填写的数据了。
【注意】：这个非常方便，但是之前从来没有接触过。
点击保存按钮绑定的事件代码：
第一个id是保存按钮：
第二个id是模态框里面的表单：
我们来测试一下，如果我们填写好模态框之后，点击保存按钮。
看表单数据alert出来长什么样子呢？
点击保存：
都是key=value&…
都是可以直接提交给服务器的数据。
那就直接发送ajax请求，发送的数据就是这个k=v的形式。
测试：
点击保存：
来到最后一页：
再看看数据库：
SELECT * FROM tbl_emp WHERe emp_name='rtl1'
但是此时这个绑定事件还没写完，存在两个地方不完善：
1、点击保存按钮之后，这个模态框没有自动消失。
2、点击保存之后，应该进入首页员工列表的最后一页，显示出刚才添加的数据。
第一个功能：保存成功之后，关闭模态框。
这个是模态框的id
第二个功能：保存成功之后，来到员工列表，显示最后一页的数据。
但是这里有个问题，怎么知道是最后一页呢？
因为：有可能在你进行保存之前，最后一页的页面刚好就是五条记录。所以，最后一页不是写死的。
【注意】：分页插件：
当前最后一页是100.
如果你发送一个请求，访问第200页的需求，它还是默认显示最后一页的数据。比较智能。
所以，我们可以调用我们之前写好的函数to_page()
然后我们传入的pn就是总记录数。
因为一页有五条数据，所以，总记录数肯定是大于等于页码的。
所以，你访问一个大于等于最后一页的页码的数据的时候，它会默认给你显示最后一页的数据。
1、我们先在全局定义一个总记录数。
2、我们之前获取总记录数是在显示分页信息的时候，获取过。
3、
4、测试：
点击保存：模态框消失并且自动显示最后一页的数据给用户。
至此，所有的index.jsp的代码内容：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
首页
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
员工添加
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）