layer父子页面交互（子页面form表单提交）

最新推荐文章于 2023-03-17 13:48:04 发布

原创最新推荐文章于 2023-03-17 13:48:04 发布 · 1.1w 阅读

8 ·

CC 4.0 BY-SA版权

页面展示专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用layer弹窗在父子页面间进行交互，特别是子页面中form表单的提交操作，适用于需要在不跳转页面的情况下修改数据的场景。

个人感觉layer弹窗功能挺好使用的，功能挺齐全的。

在这样的场景：父页面中有数据需要修改，但不需要跳转到下一个页面进行处理；

这时就可以考虑使用弹窗功能；

先看看图解：

再瞅瞅代码

//jsp部分
<input id="handle" name="handle" value="" hidden="hidden">

//js部分
  layer.open({
                		title: "XXX",
                	        type: 2,
                	        area: ['700px', '530px'],
                	        fix: false, //不固定
                	        maxmin: true,
                	        content:  '子页面的url',
                	        success:function(layero,index){
                	        	
                	        },
                	        end:function(){    //子页面销毁时回调的方法
                	        	var handle = $("#handle").val();
                	        	if( handle == 1){
                	        		layer.msg('修改成功', {
     									 icon: 1,
    									 time: 1500 //2秒关闭（如果不配置，默认是3秒）
   									}, function(){
   										$("#handle").attr("value","");
   										window.location.href = '重新加载的页面';
   									});  
                	        		
                	        	}
                	        }
                	    });

//正常表单页面
// 提交按钮、取消按钮  绑定点击事件   
<script type="text/javascript">
	$(function() {
		$("button[type='submit']").click(function() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.$("#handle").attr("value",1);
			parent.layer.close(index);
		//  parent.location.reload(); // 父页面刷新  
		})
	})

	function cancelBack() {
		var index = parent.layer.getFrameIndex(window.name);
		parent.$("#handle").attr("value",2);
		parent.layer.close(index);
	}
</script>

很简单的举例，大家理解一下就好！