解决layui弹出层表单submit提交后弹窗自动关闭问题

 当表单中添加了layui内置的表单验证规则后,需要submit提交表单才生效,但是弹出层中的表单一点击submit提交按钮后弹出层会立即关闭,这样就看不到成功或者错误的提示信息了。

layui内置的校验规则 lay-verify="required|phone|number"

required(必填项)
phone(手机号)
email(邮箱)
url(网址)
number(数字)
date(日期)
identity(身份证)
自定义值

我使用的解决办法是在监听提交中添加return false;阻止表单提交事件。

            var addform;    //存储弹出层用于等会关闭它
            $("#addqrcodebtn").on('click', function () {
                addform = layer.open({
                    type: 1,
                    title: '新增二维码',
                    content: $('#addqrcodeform'),
                    area: ['500px', '350px']
                });
            })

            //监听提交
            form.on("submit(addSubmit)", function (data) {

                apiPost('/IRS_Requirements/AddNoteBookOutBarCode', data.field, function (res) {
                    if (res.Code != 1) {
                        //弹出错误提示
                        layer.msg(res.Message, {
                            icon: 5
                        })
                    } else {
                        //弹出成功提示
                        layer.msg(res.Message, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            layer.close(addform);成功提示弹出1秒后关闭变量addform的弹出层
                        })
                    }
                })
                return false;    //在监听提交中添加return false;阻止表单提交事件

            });

### Layui 弹出提交 PHP 和 MySQL 表单示例 #### 准备工作 为了实现通过 Layui弹出提交表单数据到服务器并保存至 MySQL 数据库,需准备如下环境: - 安装好支持 PHP 运行的 Web 服务端软件(如 Apache 或 Nginx) - 已配置好的 MySQL 数据库及其连接参数 - 下载并引入 Layui 库文件 #### HTML 结构与 JavaScript 实现 创建一个简单的页面结构用于触发弹出,并定义表单项。 ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Layui Form Submit Example</title> <!-- 引入 layui.css 文件 --> <link rel="stylesheet" href="/path/to/layui/css/layui.css"/> </head> <body> <button type="button" class="layui-btn" id="showForm">打开表单</button> <div style="display:none;" id="formContent"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">ID</label> <div class="layui-input-block"> <input type="text" name="id" required lay-verify="required" placeholder="请输入 ID" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-block"> <input type="text" name="name" required lay-verify="required" placeholder="请输入 名称" autocomplete="off" class="layui-input"> </div> </div> <!-- 更多字段... --> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button> </div> </div> </form> </div> <script src="/path/to/layui/layui.js"></script> <script> layui.use(['layer', 'form'], function(){ var layer = layui.layer; var form = layui.form; document.getElementById('showForm').addEventListener('click', function () { layer.open({ type: 1, title: false, // 不显示标题栏 closeBtn: true, area: ['400px', 'auto'], shadeClose: true, content: $('#formContent'), success: function(layero){ form.render(); // 更新表单组件状态 } }); }); form.on('submit(submitForm)', function(data){ $.ajax({ url: '/your/php/handler.php', method: 'POST', data: JSON.stringify(data.field), contentType: "application/json", dataType: "json", success: function(response){ if (response.status === 'success'){ layer.msg('操作成功'); location.reload(); }else{ layer.alert('发生错误:' + response.message); } }, error: function(xhr, status, err){ console.error(err); layer.alert('请求失败,请重试'); } }); return false; // 阻止默认行为 }); }); </script> </body> </html> ``` 上述代码展示了如何利用 `layer` 创建自定义样式的模态框以及监听表单提交事件[^1]。当点击按钮时会展示包含表单元素在内的隐藏区域作为弹窗内容;而一旦用户填写完毕并点击“立即提交”,则发起 AJAX 请求向指定 URL 发送 POST 请求携带序列化后的表单数据[^2]。 #### 后端处理逻辑 在 `/your/php/handler.php` 中编写相应的 PHP 脚本来接收前端传递过来的信息,并执行数据库插入或其他业务逻辑操作。 ```php <?php header("Content-Type: application/json;charset=utf-8"); $mysqli = new mysqli("localhost", "username", "password", "database_name"); if ($mysqli->connect_error) { die(json_encode(["status"=>"error","message"=>$mysqli->connect_error])); } $data = json_decode(file_get_contents('php://input'),true); $id = $data['id']; $name = $data['name']; $stmt = $mysqli->prepare("INSERT INTO your_table(id,name) VALUES (?,?) ON DUPLICATE KEY UPDATE name=?"); $stmt->bind_param("ssi",$id,$name,$name); if($stmt->execute()){ echo json_encode(["status"=>"success"]); }else{ http_response_code(500); echo json_encode(["status"=>"error","message"=>$mysqli->error]); } ?> ``` 这段脚本负责解析来自客户端的数据流,将其转换成关联数组形式以便后续使用。接着构建 SQL 插入语句并通过预编译的方式防止SQL注入攻击风险。最后返回给前端一个 JSON 响应告知其操作结果的状态码和消息体。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值