layui提交form表单的示例
使用layui后台框架，从父页面操作提交子页面的表单信息
创新互联专业网站制作、网站设计，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文营销等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。
1. 父页面
1.1 html
1.2 相关js
// 绑定新增用户事件
$("#add").on("click", function() {
layer.open({
skin : 'layui-layer-molv',
type : 2,
title : '新增用户',
area : [ '440px', '390px' ],
shade : 0.8, // 遮罩层透明度
id : 'LAY_layuipro', //设定一个id，防止重复弹出
resize : false, //是否允许拉伸
btn : [ '确认', '关闭' ],
moveType : 1, //拖拽模式，0或者1
content : 'user/add/view',
yes: function(index, layero){ // 确认按钮回调方法,两个参数分别为当前层索引、当前层DOM对象
var submitID = 'LAY-back-submit'; // 1.提交按钮ID
var submitFilterID = 'LAY-front-submit'; // 2.提交按钮lay-filter
var submit = layero.find('iframe').contents().find('#'+ submitID); // 3.获取子页面按钮
var iframeWindow = layero.find('iframe')[0].contentWindow; // 4.获取子页面iframe对象
// 5.监听子页面提交事件
iframeWindow.layui.form.on('submit(' + submitFilterID + ')', function(data) {
// 5.1新增用户
addUser(index, data);
});
// 6.触发子页面点击事件
submit.trigger('click');
}
});
});
// 新增用户
function addUser(index,formData) {
// 加载提示
var loadingMsg = layer.msg('数据请求中,请稍候...', {icon: 16,scrollbar: false,time: 0,shade: [0.8, '#393D49']});
// form请求地址
var formUrl = projectName + "sysUser/add";
$.ajax({
type: 'POST',
async: false, // 默认异步true,false表示同步
url: formUrl, // 请求地址
dataType: 'json', // 服务器返回数据类型
data: formData.field, //获取提交的表单字段
success: function(data) {
layer.close(loadingMsg); // 关闭提示层
if (data.code == '1002') {
// 信息提示
layer.alert(data.message, {skin: 'layui-layer-molv', closeBtn: 0,icon: 1}, function(alertIndex){
layer.close(alertIndex) // 关闭当前alert
layer.close(index); // 关闭弹出层open
/*
刷新表格数据,如果使用的是layer的toolbar工具栏,
刷新后按钮绑定将会失效,解决方案请看文章底部链接
*/
reloadTable();
});
} else {
layer.alert(data.message, {icon: 5});
}
},
error: function(XMLHttpRequest, textStatus, e) {
layer.close(loadingMsg);
layer.msg('数据请求发生异常,请稍后重试', {icon: 16,scrollbar: false});
}
});
}2. 子页面
2.1 html
2.2 js
layui.use(['form','layer'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer;
})
当前标题：layui提交form表单的示例
分享链接：http://scjbc.cn/article/gigpos.html
