资讯专栏INFORMATION COLUMN

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

lwx12525 / 1025人阅读

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

转载自: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弹出窗,并在顶层父窗口中显示提示信息,最后让顶级父页面在两秒钟后刷新自己。

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

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

相关文章

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

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

    Karrdy 评论0 收藏0
  • 【永久开源】layuimini,最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。

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

    bingchen 评论0 收藏0
  • fsLayui快速开始

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

    anquan 评论0 收藏0
  • fsLayui快速开始

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

    lordharrd 评论0 收藏0
  • layui实现动态和静态数据表分页

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

    caige 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<