实现了动态加载bootstrap模态框里面的内容，但是写的js表单验证不能用了

Posted 2023-05-14

参考技术A $('#modal-container').on('hidden.bs.modal', function() 
    //在这里调用你的js
);

用hidden.bs.modal事件，在隐藏modal时触发你的js

ssm员工管理系统---通过Bootstrap的模态框实现添加员工功能

文章目录

• • ssm员工管理系统---通过Bootstrap的模态框实现添加员工功能
  • • 需求
    • 给新增按钮绑定一个单击事件
    • 把bootstrap中的模态框加入到index.jsp首页
    • 模态框中的保存按钮绑定的单击click事件
    • 后端控制器用于接收/emp请求的方法saveEmp
    • service层的saveEmp方法
    • 动态代理接口的addEmplyee方法
    • 映射文件中对应的sql语句
    • 测试

ssm员工管理系统—通过Bootstrap的模态框实现添加员工功能

需求

点击新增按钮之后，会跳出来一个模态框，在模态框上填写添加的用户信息，点击模态框上的添加按钮之后，页面会跳转到最后一页，显示添加的员工信息。

给新增按钮绑定一个单击事件

给新增按钮，绑定一个单击事件，实现点击新增按钮之后，跳出模态框的功能，新增按钮如下图：

把bootstrap中的模态框加入到index.jsp首页

bootstrap官网的模态框，如下图：

把模态框的代码移到index.jsp首页中，如下图：

模态框的效果，如下图：

模态框中的保存按钮绑定的单击click事件

点击模态框中的保存按钮之后，会触发保存按钮的单击click事件，此事件的代码如下图：

后端控制器用于接收/emp请求的方法saveEmp

saveEmp方法干的事情：

1.校验数据

2.调用service层的saveEmp方法，把用户信息保存到数据库

3.返回成功信息

saveEmp方法的代码如下图：

service层的saveEmp方法

如下图：

动态代理接口的addEmplyee方法

如下图：

ssm整合的时候，动态代理接口的包一定要在applicationContext.xml配置文件中扫描，要不然的话，动态代理接口就仅仅是普通的接口，是没办法和映射文件里面的sql语句联系起来的，怎么扫描呢？如下图：

映射文件中对应的sql语句

如下图：

测试

首先进入首页，如下图：

然后点击新增按钮，点击之后，会跳出来一个新增员工的模态框，如下图：

在员工添加模态框中填写要添加的用户信息，如下图：

点击保存按钮，会跳转到最后一页，显示刚刚添加的员工信息，如下图：