jsp页面中利用弹窗增加数据

在对后台对数据进行管理的时候我们可以利用弹窗做很多事情，例如增加数据，原理就是利用layer弹窗技术打开另一个前端页面然后提交表单，刷新页面，当然也可以局部刷新。

具体实现：

在总页面中设置一个添加按钮绑定事件根据layer弹窗直接打开另一个jsp窗口，在另一个jsp页面中绑定form表单直接提交到后端执行增加数据的action，但不能在该action中设置其他视图跳转，最好把该方法返回值设为空

后端代码：

@RequestMapping(value="/addLabelDir")

public void addLabelDir(Model model,LabelDir vo) {

service.addLabelDir(vo);

}

后端代码比较简单，就是一个简单的增加方法。

 

前端jsp代码：

<a href="javascript:;" onclick="member_add('添加数据',' ${pageContext.request.contextPath}/addDictionary.jsp','','510')"

class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>

添加字典</a>


调用弹窗的代码

/*用户-添加*/

function member_add(title, url, w, h) {

layer_show(title, url, w, h);

}

上面为定义打开弹窗的函数以及调用的方法，另一个增加数据的jsp页面主要功能就是显示一个表单然后用户填充数据，点击提交之后执行增加方法再关闭弹窗。

其余的设置表单代码省略： 看关键代码，提交表单的代码

$("#form-member-add").validate({ //表单提交的验证规则

rules:{

name:{

required:true,

minlength:2,

maxlength:16

},

growTime:{

required:true,

},

uploadfile:{

required:true,

},

} ,

submitHandler:function(form){

save();

alert("增加成功");

}

});

原本是直接调用两行代码直接验证表单之后关闭弹窗的，但是如果直接执行这两行代码的话会发现表单提交和关闭弹窗只能执行一个，试了好多次都不行，要么表单提交了弹窗没有关闭，调换一下顺序就变成弹窗关闭了但是表单没有提交增加方法没有执行。

form.submit();

var index = parent.layer.getFrameIndex(window.name);

parent.parent.layer.close(index);

 

所以我增加了一个方法，用ajax执行表单提交的方法，然后再表单提交之后直接刷新父页面，因为是直接刷新的父页面所以表单不用手动关闭了，所以我把上面的增加数据的action方法返回值直接设为空，因为压根不需要它实现跳转，他只是用来执行增加的数据的方法而已。

function save(){

$.ajax({

type:"post",

url:"${pageContext.request.contextPath}/addDictionary.action",

data: $("#form-member-add").serialize(),//序列化表单数据

complete: function() {

window.parent.location.reload();//关闭弹窗

}

});

}

 

最后附上几种弹窗的关闭方法：

var index = parent.layer.getFrameIndex(window.name); //获取弹窗的索引

parent.parent.layer.close(index); //根据索引关闭指定弹窗

直接关闭所有：

layer.closeAll(); /关闭所有层

layer.closeAll('dialog'); //关闭信息框

layer.closeAll('page'); //关闭所有页面层

layer.closeAll('iframe'); //关闭所有的iframe层

layer.closeAll('loading'); //关闭加载层

layer.closeAll('tips'); 关闭所有tips层