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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 微信小程序开发实战1 微信小程序开发概述

    微信小程序开发实战1 微信小程序开发概述1.微信小程序开发概述1.1微信小程序的特点微信小程序是微信平台提供的一种开放技术,微信小程序为企业用户服务,用于建立一种移动端的“轻应用”,这种应用是不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用。用户也不用关心是否安装了太多应用的而造成手机空间不足问题。微信小程序的推出后,与订阅号、服务号、企业号并列成为微信的企业应用体系。图1-1微信公众平台产品类型微信小程序运行在微信平台之上,微信平台对不同的手机平台已经做了兼容。使用微信小程序开发的应用,不需要兼容多个平台,开发完成后可

    2022年7月16日
    33
  • 【TCP/IP】IP地址的划分及其分类

    【TCP/IP】IP地址的划分及其分类了解Internet中使用的网络层地址,又称IP地址。每个设备都至少需要一个IP地址,其可以作为我们设备的标识,就跟我们的电话号码一样,知道了电话号码就能找到我们,所以每个IP地址都是唯一的,所以在给每台设备分配IP时,会根据一套编号方案进行。IP作用于OSI参考模型中的网络层,在终端通信中作为唯一标识,便于确定数据的传递目标。IP地址分为:IPv4、IPv6大多数用户熟悉并且流行的IP地址是IPv4,其是用点分四组十进制的表示方法展示的,例如165.195.130.107

    2022年6月14日
    30
  • 构建算法模型_模型与算法有什么不同

    构建算法模型_模型与算法有什么不同文章目录1.情感词典内容2.情感倾向点互信息算法(SO-PMI)算法点互信息算法PMI情感倾向点互信息算法SO-PMI3.构建情感词典1.导入项目2.构建情感种子词3.使用TF-IDF方便构建情感种子词4.构建专业词典的效果与使用方法5.其他说明1.情感词典内容情感词典构建方法归为三类,分别是:词关系扩展法、迭代路径法和释义扩展法情感极性:正向、负向;表示正面情感(开心愉快)或负面情感(伤心愤怒)情感极值:情感倾向(微笑、开怀大笑、手舞足蹈虽然都可以表示开心,但有不一样的

    2022年8月23日
    6
  • Struts2–自定义拦截器三种方式(实现Interceptor接口、继承抽象类AbstractInterceptor、继承MethodFilterInterceptor)「建议收藏」

    Struts2–自定义拦截器三种方式(实现Interceptor接口、继承抽象类AbstractInterceptor、继承MethodFilterInterceptor)「建议收藏」实现自定义拦截器在实际的项目开发中,虽然Struts2的内建拦截器可以完成大部分的拦截任务,但是,一些与系统逻辑相关的通用功能(如权限的控制和用户登录控制等),则需要通过自定义拦截器实现。本节将详细讲解如何自定义拦截器。1.实现Interceptor接口在Struts2框架中,通常开发人员所编写的自定义拦截器类都会直接或间接地实现com.opensymphony.xwork2.in…

    2022年5月14日
    43
  • jquery判断数组中是否包含某个元素的值_java判断元素是否在数组中

    jquery判断数组中是否包含某个元素的值_java判断元素是否在数组中$.inArray(“元素字符串”,数组名称);vararry=[“C#”,”html”,”css”,”JavaScript”];varresult=$.inArray(“C#”,arry);如果arry数组里面存在”C#”这个字符串则返回该字符串的数组下标,否则返回(不包含在数组中)-1…

    2022年10月18日
    2
  • 【附源码+代码注释】误差状态卡尔曼滤波(error-state Kalman Filter),扩展卡尔曼滤波,实现GPS+IMU融合,EKF ESKF GPS+IMU

    【附源码+代码注释】误差状态卡尔曼滤波(error-state Kalman Filter),扩展卡尔曼滤波,实现GPS+IMU融合,EKF ESKF GPS+IMU2021年6月23日更新:发现了一个讲卡尔曼滤波特别好的视频,但是需要科学上网。卡尔曼滤波视频 最近在学习卡尔曼滤波器,今天抽出点儿时间总结一下! 我的所有源码都放在

    2022年6月22日
    39

发表回复

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

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