大家好,又见面了,我是你们的朋友全栈君。
本文章使用layui框架,提交表单,如果使用其他的框架请右上角!
首先设置弹出层如下图:
layer.open({
type : 2,
title : "信息編輯",
area : [ '45%', '35%' ],
shade : 0,
shadeClose : false,
content : "/admin/user/classInfoEditTurn?classId="+data.classId,
btn:['提交'],
yes:function(index,layero){
var body = top.layer.getChildFrame('body',index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
console.log(body.find('#classId').val());
$.ajax({
url:"/admin/user/updateClassInfo",
type:'post',
data:{
'classId':body.find('#classId').val(),
'className':body.find('#className').val(),
'classType':body.find('#classType').val(),
'gradeName':body.find('#gradeName').val(),
'schoolPart':body.find('#schoolPart').val()
},
dataType:'json',
success:function(data){
if (data.code == 0) {
layer.msg(data.msg,{
icon:1,
time:1000
},function(){
parent.layer.close(index)
});
} else if (data.code == 500) {
layer.msg(data.msg,{
icon:2,
time:1000
},function(){});
}
}
});
},
closeBtn : 1,
btnAlign:'c',
success : function(layero, index) {
},
cancel : function() {
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: ['是的关闭它', '我再考虑一下']
,yes:function(){
layer.closeAll();
}
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'
});
return false;
},
end : function() {
layer.closeAll();
location.reload();
}
});
代码说明:
特别声明:在父层提交表单,需要获取表单页面的数据,并且调用后台接口,如上代码中的yes:后面的代码,要注意,这里的layui教程中,yes后面的function参数顺序错误了应该是function(index,layero){}不是function(layero,index){},鄙人也是花了很久才弄明白这么回事。
接下来就是获取iframe里面内容,如var body = top.layer.getChildFrame(‘body’,index); console.log()一下body.html(),能看到页面内容,获取页面的值,使用body.find(‘#id’).val();样式来获取input标签的内容,其他的标签也是照样获取,然后再利用ajax想后台提交数据就能够提交表单了;
如果中间出现 :Syntax error, unrecognized expression: #layui-layer[object Object] 和layero.find is not a function这样的问题就是yes后面的function()中的layero,index参数顺序错误,这里注意一下在参照layui教程就可以获取页面参数了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138987.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...