layui 表单提交

原创已于 2024-01-13 09:48:09 修改 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #html5

于 2021-11-26 06:25:26 首次发布

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

php

3 篇文章

订阅专栏

这段代码展示了如何在HTML中使用layui框架创建一个表单，包括角色名称和描述的输入字段，以及一个提交按钮。JavaScript部分引入了jQuery和layui库，并监听表单的提交事件，通过Ajax将数据发送到后台的admin/adminRoleSave接口，成功后跳转到指定URL并显示提示信息。

HTML 代码

<link rel="stylesheet" href="/tp5/public/static/layui/css/layui.css">

 <form class="layui-form" action="{:url('admin/adminRoleSave')}" method="post">
    <div class="layui-form-item">
         <label class="layui-form-label">角色名称</label>
          <div class="layui-input-block">
              <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
    </div>
    <div class="layui-form-item layui-form-text">
         <label class="layui-form-label">请填写描述</label>
         <div class="layui-input-block">
            <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
     	</div>
    </div>
    <div class="layui-form-item">
         <div class="layui-input-block">
               <button class="layui-btn" lay-submit lay-filter="demo">新增角色</button>
         </div>
     </div>
</form>

javascript代码

script src="/tp5/public/static/js/jquery.min.js"></script>
<script src="/tp5/public/static/layui/layui.js"></script>

<script>
    layui.use('form', function(){
        var form = layui.form();
        //监听提交
        form.on('submit(*)', function(data){
            $.ajax({
                url:data.form.action,
                type:data.form.method,
                data: data.field,
                success: function (info) {
                   if (info.code === 1) {
                       setTimeout(function () {
                          location.href = info.url;
                       }, 1000);
                  }
                    layer.msg(info.msg);
                }
            });
            return false;
        });
    });
</script>