PHP结合layer处理弹出窗口提交的值

lwx12525 发布于2019-06-27 16:57 / 1214人阅读

摘要：为了更加优雅的弹出子窗口，我们使用了这一款优秀的插件。所以等同于表单提交到页面自身，只不过是展示在了自身的里。

转载自：http://www.884358.com/php-layer/

在开发中经常会遇到点击按钮弹出展示表单，在表单中填写信息后，点击保存，最后返回列表页的情况。

我们想实现的比较友好的效果通常是：用户点击按钮弹出子窗口，填写完子窗口中的表单信息后，点击子窗口中的保存按钮，页面提示保存成功，并关闭子窗口，最后刷新父页面。

为了更加优雅的弹出子窗口，我们使用了layer这一款优秀的jQuery插件。在使用过程中，可以很方便的弹出我们想要的页面，例如表单填写页面。
例如如下页面：




     弹窗测试

点击“点击弹出窗口”按钮，页面会弹出子窗口显示http://127.0.0.1/test/layer/f...的页面内容，form.php的代码如下：

parent.parent.layer.closeAll();parent.parent.layer.msg("添加成功，页面正在刷新");parent.parent.setTimeout("refresh()",2000);";
    die;
}
?>



     弹窗测试 
    






    
        
            姓名
            
        
        
            年龄

注意表单form的target属性是指向的本页面的iframe，target的名称即为iframe的name。当填写了表单上的信息后，点击提交按钮，页面会将form表单中的信息提交到iframe中，由于iframe没有指定src属性，所以iframe的地址是页面自己，同时设置了display:none，所以是不可见的（为了便于观察效果，你也可以暂时先把display:none删除）。所以等同于表单提交到页面自身，只不过是展示在了自身的iframe里。自身的php代码里识别到了post过来的数据，则会输出一句js代码，js代码的目的是关闭顶级父窗口的layer弹出窗，并在顶层父窗口中显示提示信息，最后让顶级父页面在两秒钟后刷新自己。

云服务器 GPU云服务器 layer弹出窗口 php弹出窗口插件 php生成弹出窗口 layer 弹出层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/23195.html

【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。

摘要：后台模板项目介绍最简洁清爽易用的后台框架模板。项目会不定时进行更新，建议和一份，另外有问题请加群。地址定位，可以清楚看到当前的地址信息。刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。移动端的友好支持。 layuimini后台模板项目介绍最简洁、清爽、易用的layui后台框架模板。项目会不定时进行更新，建议star和fork一份，另外有问题请加QQ群：76382252...

Karrdy 2019-08-02 15:21 评论0 收藏0
【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。

摘要：后台模板项目介绍最简洁清爽易用的后台框架模板。项目会不定时进行更新，建议和一份，另外有问题请加群。地址定位，可以清楚看到当前的地址信息。刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。移动端的友好支持。 layuimini后台模板项目介绍最简洁、清爽、易用的layui后台框架模板。项目会不定时进行更新，建议star和fork一份，另外有问题请加QQ群：76382252...

bingchen 2019-08-30 11:13 评论0 收藏0
fsLayui快速开始

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。注意这里一定要修改为自己项目的配置。列表页列表页支持通过表单传参查询数据，刷新表格等功能。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云...

anquan 2019-08-02 15:59 评论0 收藏0
fsLayui快速开始

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。注意这里一定要修改为自己项目的配置。列表页列表页支持通过表单传参查询数据，刷新表格等功能。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云...

lordharrd 2019-08-22 11:15 评论0 收藏0
layui实现动态和静态数据表分页

开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据...

caige 2019-08-22 16:47 评论0 收藏0