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

全栈程序员-站长 • 2022年5月6日下午11:20 • 未分类 • 阅读 590

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

本文章使用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