php 提交表单 关闭layer弹窗iframe的实例讲解

PHP 提交表单关闭layer弹窗iframe是我们在开发中经常遇到的问题之一。在本篇文章中,我们将讲解如何通过PHP提交表单后关闭layer弹窗iframe,让您的网页交互更加顺畅。

一、简介

我们常常使用layer插件作为弹窗窗口,但是在实际应用中,我们经常需要在提交表单后关闭该弹窗,这就需要用到PHP向后端发送请求,进而实现窗口关闭效果。

二、关闭方法

要关闭弹窗窗口,我们可以参考以下步骤。

1.表单提交

首先,我们需要在前端页面添加一个表单,然后在该表单中指定后端处理程序的URL地址,如下:

```

...

```

需要注意的是,我们在使用layer插件时,通常是在弹窗中嵌入一个iframe,然后在该iframe中添加表单,这样可以使表单可以在弹窗中显示。因此,我们在form表单前面添加一行代码,用于从当前iframe中获取到layer的index,后面会使用到。

```

```

2.后端处理程序

然后,我们需要编写后端处理程序,处理提交过来的表单,将数据进行处理后存储到数据库中,并向前端发送响应信息。这里需要注意的是,我们可以通过header函数来刷新页面或跳转到其他页面。在这里,我们将使用header函数刷新页面,然后调用父页面的closeWin函数关闭弹窗,如下所示:

```

if(保存成功) {

header('Location: notice.html');

echo '';

exit;

}else {

echo '保存失败';

}

```

3.JS处理

接下来,我们需要在前端页面的JS部分中添加一个关闭弹窗的函数closeWin,如下所示:

```

//关闭弹窗

function closeWin(index) {

if(index > 0) {

layer.close(index);

// 刷新父层

window.location.reload();

}

}

```

然后,在表单提交(即点击“保存”按钮时)触发的函数中,我们需要获取到前面在表单中添加的layerIndex的值,将其传递给closeWin函数,从而关闭弹窗窗口,如下所示:

```

function submitForm() {

var index = $("#layerIndex").val();

$.ajax({

type: "POST",

url: "handler.php",

data: formData,

dataType: "json",

success: function(data) {

var status = data.status;

if(status == 1) {

alert('保存成功');

parent.closeWin(index);

}else {

alert(data.msg);

}

},

error: function(e) {

console.log(e.responseText);

}

});

}

```

三、总结

以上就是关闭layer弹窗iframe的方法,我们在实际应用中应该根据具体情况进行修改,例如,将数据存储到数据库中的方式、后端处理程序的地址等。希望本文能帮助您解决类似问题,使您的项目开发更加便捷。

后端开发标签