layui弹出层提交表单![通俗易懂]

layui弹出层提交表单![通俗易懂]本文章使用layui框架,提交表单,如果使用其他的框架请右上角!首先设置弹出层如下图:layer.open({ type:2, title:"信息編輯", area:[‘45%’,’35%’], shade:0, sha…

大家好,又见面了,我是你们的朋友全栈君。

本文章使用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教程就可以获取页面参数了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/138987.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python猪脸识别_京东JDD猪脸识别比赛「建议收藏」

    python猪脸识别_京东JDD猪脸识别比赛「建议收藏」pig_face_recognition京东JDD猪脸识别比赛pytorch-baseline1.运行环境TeslaK20c集群单节点双卡RedHat4.4.7-3Python2.7.13cuda8.0cudnn5.0pytorch0.3.02.从视频中截取出猪用yolo-9000算法,人工打label后,对ffmpeg提取出的视频帧进行猪的目标检测,框出猪的主体部分,为后续…

    2022年6月21日
    35
  • display:flex垂直居中

    display:flex垂直居中布局说明:1.场次为一场比赛     2.比赛双方是交战的两个队伍        3.一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都不确定。主要说下我学到的垂直居中的flex。1.第一次尝试。1divclass=”parent”>2h1>我是通过flex的水平垂直居中噢h1>3h1>我是通过fl

    2022年6月14日
    67
  • 关于 time wait

    关于 time waittodo:1,把文件整理一下2,看一下那些问题的处理文章3,仔细看一下这个文章:深入tcp网上有很多关于timewait的问题和修改方案,究竟什么是timewait?作用是什么?会造成什么问题?如何解决?我们接下来一点一点看一下。一,timewait是什么?timewait状态是TCP链接的主动关闭方会有的状态,在发出最后一个ACK包之后,主动关闭…

    2022年6月10日
    34
  • 音视频开发入门_视频制作基础知识

    音视频开发入门_视频制作基础知识音视频涉及语音信号处理、数字图像处理、信息论、封装协议、编解码、渲染、流媒体协议、网络传输、视频特效、音频特效等等。而音视频在现实生活中扮演着越来越重要的角色,比如视频会议、短视频、直播、播放器、语音聊天等。所以,从事音视频工作是一件比较有意义的事情,挑战与机遇并存。本文主要从六个方面进行介绍:音视频开发基础、音视频进阶成长、音视频工作方向、音视频开源库、流媒体协议与音视频书籍。…

    2022年9月18日
    0
  • -2147467259数据库操作错误!

    -2147467259数据库操作错误!没事说搭建个asp的网站,下载了个aspcms源码系统。搭建出现的主要问题是:登录后台的时候提示:-2147467259数据库操作错误!怎么解决?搜索了一下,有些说得是那么个意思,可是我的电脑环境也有些特殊情况。(比如:文件夹属性中没有“安全”选项卡)下面整理下:-21474672

    2022年7月13日
    13
  • python怎么表示取余_python如何实现取余操作

    python怎么表示取余_python如何实现取余操作python实现取余操作的方法:可以利用求模运算符(%)来实现。求模运算符可以将两个数相除得到其余数。我们还可以使用divmod()函数来实现取余操作,具体方法如:【divmod(10,3)】。在python中要实现取余操作可以使用求模运算符(%),该运算符可以将两个数相除得到其余数。(推荐教程:Python入门教程)如果一个数恰好能被另外一个数据整除,则余数为0,%运算后返回结果为0。可利用余数…

    2022年4月25日
    54

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号