layui教程(一) form 表单的提交问题

最新推荐文章于 2025-09-11 02:14:55 发布

原创最新推荐文章于 2025-09-11 02:14:55 发布 · 7k 阅读

26 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍使用layui框架实现弹窗表单提交的具体方法，包括父页面打开子页面的代码配置，子页面表单提交的按钮设置，以及通过ajax进行数据提交的过程。文章还特别提醒在form.on()表单监控事件中加入return false;的重要性。

点击打开表单页面(弹出层形式)如:

父页面打开子页面的代码

layer.open({
	  		type:2,          //类型为1时可以为html,和代码,为2时页面地址
	  		title: title,    //弹出层的标题
	  		area: [width, heigth],  //大小
	  		fixed: false, //不固定     
	          maxmin: true, 
	          content: url,        //弹出层的地址
	          btn: ['确定', '取消'],   //按钮名称
	          yes: function(index,layero){
	          	var submit = layero.find('iframe').contents().find(submitButId);   //子页面提交表单的按钮
	          	submit.click();  //按钮提交表单
	          	return false;
	          },
	          btn2: function(){
	            layer.closeAll();
	          },
	          zIndex: layer.zIndex, //重点1
	          success: function(layero,index){
//	             layer.setTop(layero); //重点2
	        	 layer.iframeAuto(index);
	          }
	});

子页面提交表单的按钮代码

<button style="display:none" lay-submit lay-filter="submitBut" id="submitBut"></button>
//按钮样式为隐藏,当点击弹出层的确定按钮时,相当于提交表单

子页面提交表单代码

form.on('submit(submitBut)', function(data){
	 var loading = layer.msg('正在保存', {icon: 16, shade: 0.3, time:0});
	   $.ajax({
		         method:"POST",
			   	 url:saveUrl,       //提交表单的地址
			   	 data:data,      //提交表单的数据
			   	 success:function(res){
			   		 if(res.stateType == 0){
			   			 var index = parent.layer.getFrameIndex(window.name);
		   			      parent.layer.close(index);  
		   			  	  parent.layer.msg(res.stateMsg, { icon: 1});
		   			      parent.layui.table.reload(tableName);
					}else{
						  layer.msg(res.stateMsg,{icon: 2});
				    }
			   	 },
			   	 error:function(){
			   		 console.log("caozuosibai")
			   		 layer.close(loading);
			   		 layer.msg('操作失败',{icon: 2});
			   	 }
			});
	  	     return false;  //防止表单提交两次
        });

注意:form.on()表单监控事件中一定要加 return false;如果不加的话,后端不会报错,而前端代码中会运行到error中,不同浏览器也有不同效果,谷歌浏览器有时会报错,火狐和其他浏览器100%报错