php程序layer,PHP结合layer处理弹出窗口提交的值

朱雀 2022-11-16 01:55 168阅读 0赞

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

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

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

例如如下页面：

弹窗测试

点击弹出窗口

function refresh() \{

location.reload();

\}

//弹出一个iframe层

$('\#parentIframe').on('click', function () \{

layer.open(\{

type: 2,

title: '点击弹出窗口',

maxmin: true,

shadeClose: true, //点击遮罩关闭层

area: \['800px', '520px'\],

content: 'http://127.0.0.1/test/layer/form.php'

\});

\});

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

if ($\_POST) \{

//处理你的业务...

echo "";

die;

\}

?>

弹窗测试

<table> 
 <tbody> 
  <tr> 
   <td>姓名</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>年龄</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td colspan="2"></td> 
  </tr> 
 </tbody> 
</table>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript：layer关闭指定弹出窗口

JavaScript：layer关闭指定弹出窗口前言一、关闭指定窗口 1.关闭指定窗口：layer.close(index)——推荐用法

电玩女神/ 2024年03月16日 18:35/ 0 赞/ 140 阅读

相关 js弹出窗口(JS弹出窗口代码)

javascript 打开窗口方法有几种?? showModalDialog("url",要传的参数,"画面的一些设置") showModelessDialog()

忘是亡心i/ 2023年09月26日 14:46/ 0 赞/ 198 阅读

相关【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑

今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退

我不是女神ヾ/ 2023年07月05日 11:53/ 0 赞/ 75 阅读

相关 php程序layer,PHP结合layer处理弹出窗口提交的值

在开发中经常会遇到点击按钮弹出展示表单，在表单中填写信息后，点击保存，最后返回列表页的情况。我们想实现的比较友好的效果通常是：用户点击按钮弹出子窗口，填写完子窗口中的表单信

朱雀/ 2022年11月16日 01:55/ 0 赞/ 169 阅读

相关 layer 弹出层

使用方法：一、引入 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></scrip

约定不等于承诺〃/ 2022年07月24日 07:03/ 0 赞/ 382 阅读

相关 layer.msg弹出会关闭layer.open弹出的窗口问题

解决方法：给layer.open加个 type:1 layer的icon样式： ![20171104174824418][] [20171104174

小鱼儿/ 2022年06月06日 08:56/ 0 赞/ 715 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 516 阅读

相关弹出窗口

【1、普通的弹出窗口】其实代码非常简单： <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.ht

系统管理员/ 2022年01月09日 05:35/ 0 赞/ 458 阅读

相关 layer弹出层内点击确认提交数据并关闭弹出层

$.ajax({ url: "json/DeductScore.ashx", type:

心已赠人/ 2021年09月15日 07:26/ 0 赞/ 919 阅读

相关 layer弹出层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layu

清疚/ 2021年09月15日 07:26/ 0 赞/ 642 阅读