526互联

layui弹出层按钮提交iframe表单

发布时间 2023-07-13 17:38:19作者: 下课后我要去放牛

1、当使用layer.open打开一个iframe的子页面：进行添加编辑时，保存提交是在layer.open()中进行处理的。

 

问题来了：当我们提交表单时，就要获取form表单对象

 

第一种：在layer.open中iframe页面的form提交：使用form.submit()    这种提交是没有返回结果的，单向的提交。

【这种会导致刷新列表不好控制，提交后台还未处理完直接刷新，造成数据问题】

     layer.open({
            title: title,
            type: 2,
            offset: '150px', //弹窗居中
            area: [width, height],
            content: addurl,
            btn: ['保存', '关闭'],
            success: function(layero, index){
                //成功打开弹窗事件 alert(22);
                //var loading = layer.load(1, {shade: [0.1, '#fff']});
                
            },
            yes: function(index, layero){
                //保存按钮事件
                
                //拿到的是form表单所有元素对象
                var form = layero.find("iframe").contents().find("body").find('#formobj')[0];
                form.submit(); //提交表单，没有返回结果，不好处理

                layer.close(index);
                layer.msg("操作成功", {icon: 1, time: 3000});
                
                location.reload(); //刷新页面
                
            },
            end: function(){
                //关闭按钮事件
                
                //location.reload(); //刷新页面
            }
          });

 

 

第二种：使用ajax提交form表单，得到返回结果再处理

【

主要是这段代码：拿到form表单所有字段的序列化值，提交到后台

top.layer.getChildFrame('body',index).find("#formobj").serialize();

】

        layer.open({
            title: title,
            type: 2,
            offset: '150px', //弹窗居中
            area: [width, height],
            content: addurl,
            btn: ['保存', '关闭'],
            success: function(layero, index){
                //成功打开弹窗事件 alert(22);
                //var loading = layer.load(1, {shade: [0.1, '#fff']});
                
            },
            yes: function(index, layero){
                //保存按钮事件
                
                //拿到的是form表单所有元素对象
                var form = layero.find("iframe").contents().find("body").find('#formobj')[0];

                //拿到form表单的所有字段参数并序列化：id=&orgId=1234&operType=test2224
                var formParam = top.layer.getChildFrame('body',index).find("#formobj").serialize();
                
                      //form.action可得到form表单的action属性，它的值路径

                //使用ajax提交form表单
                       //请求后台
    　　　　　　　　$.ajax({
        　　　　 　　async : false,
        　　　　 　　cache : false,
        　　　　 　　type : 'POST',
                　　dataType: "json",
        　　　　 　　data : formParam,
        　　　　 　　url : form.action,// 请求的action路径
        　　　　 　　error : function() {// 请求失败处理函数
        　　　　 　　},
        　　　　 　　success : function(data) {
            
        　　　　　　 }
    　　　　　　 　　});  


  
            　},
            　end: function(){
                //关闭按钮事件
                
                //location.reload(); //刷新页面
              }




          });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。