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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • js原生实现FastClick事件

    js原生实现FastClick事件js原生实现FastClick事件注明:本人学习javascript时间不长,最近一直在做web端的手机网页和微信应用,由于最近有用到类似fastclick的功能,在原来的程序中用touchstart和touchend事件模拟,现在尝试将其封装,得到了以下两种有问题的方案。分享给大家,另求大神指导

  • c++反编译工具_pc下载软件

    c++反编译工具_pc下载软件  昨天在逆向某App的时候,发现有个加密工具类中的native方法是用C语言编写的,隐藏在so文件中。某大佬推荐逆向工具unidbg,能在pc端直接调用so文件中的函数,最终成功解决了问题。逆向工具之unidbg目录一、`unidbg`引入二、`unidbg`概述三、`unidbg`使用姿势1、下载`unidbg`项目2、导入到IDEA中①、解压压缩包②、打开`IDEA`,导入解压的项目3、测试`unidbg`4、运行自己的`so`文件①、编写`EncryptUtilsJni`类②、参数说明③、执行结果

  • NOIP2011题解

    NOIP2011题解D1T1.铺地毯题目描述为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯,一共有n张地毯,编号从1到n。现在将这些地毯按照编号从小到大

  • ssh登录linux

    ssh登录linux2018-9-6上一篇提到用ssh登录centos好处很多,许多linux系统管理员都在用ssh。在windows下ssh客户端主要有puTTY、Xshell、secureCRT、sshsecureshell。linux下有openssh,这是个命令行工具。这篇主要将puTTY和Xshell的使用。puTTYpuTTY是开源免费软件。放恶意软件,建意到官网下载,或者百度、360、搜…

    2022年10月28日
  • authenticator验证码不显示_打电话报的验证码安全吗

    authenticator验证码不显示_打电话报的验证码安全吗【2021/07/14】记录在修改代码中IDE闪烁了一下,原本正常的验证码图片就不显示了。但是没有报错,日志也没有记录。折腾了半天都无效果,我塔咩直接???然后突然看见了ob_clean()这玩意,然后加在了验证码输出之前,然后!就正常了!publicfunctioncaptcha(){ob_clean();returnCaptcha::create();}但是!为什么要加这个就能

  • python如何安装matplotlib.pyplot_matplotlib中文

    python如何安装matplotlib.pyplot_matplotlib中文首先,一些博文上说可以在pycharm自动安装,也就是:File–Setting–ProjectInterpreter–±-输入指定模块安装,这对于社区版或教育版真的不行,好吗。安装的思路比较靠谱的,也是自己安装成功的方法。第一步:在官网上下载指定安装包:官网模块包:https://pypi.org/project需要什么模块就下载啥,需要注意的是与你的python版本一致(至于怎么一致,可以…

发表回复

您的电子邮箱地址不会被公开。

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