layui-ssm项目：增加按钮添加数据

灯塔在哪里

已于 2022-11-14 16:33:56 修改

阅读量627

点赞数

文章标签： layui javascript 前端

于 2022-11-14 16:06:22 首次发布

本文链接：https://blog.csdn.net/weixin_44898449/article/details/127849214

版权

本文展示了如何利用JavaScript和layui库创建一个弹窗表单，并通过点击事件处理表单提交。在表单中，包括了用户名、密码和类别的输入字段，点击提交按钮后，会刷新父页面并关闭弹窗，提示用户操作成功。

摘要由CSDN通过智能技术生成

在这里插入图片描述
先给添加按钮添加一个id，创建一个点击事件方法，使用layer.open()方法中的iframe来显示弹窗

在这里插入图片描述 js代码

iframe页面代码：

   <title>表单</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
    <style>
        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 130px;
            min-height: 36px
        }
    </style>
</head>
<body class="body">

<form class="layui-form layui-from-pane" action="${pageContext.request.contextPath}/insetAdmin" style="margin-top:20px"
      method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-block">
            <input type="text" name="username" required lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                   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="password" required lay-verify="required" autocomplete="off" placeholder="请输入密码"
                   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="type" required lay-verify="required" autocomplete="off" placeholder="请输入类别"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="margin-top:40px">
        <div class="layui-input-block">
            <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo1" id="tj">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>

$('#tj').click(function(){

    setTimeout(function(){//设置定时器
        parent.location.reload(true);//刷新父级页面
        layer.msg("成功")
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    },0);

})

</script>
</body>