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的方法,我们在实际应用中应该根据具体情况进行修改,例如,将数据存储到数据库中的方式、后端处理程序的地址等。希望本文能帮助您解决类似问题,使您的项目开发更加便捷。