使用layer弹窗和layui表单做新增功能的方法-猿码集

使用layer弹窗和layui表单做新增功能的方法

在开发Web应用时，经常需要在页面上添加新增数据的功能。layui提供了表单组件和layer弹窗组件，可以方便地实现此功能。本文将介绍使用layer弹窗和layui表单做新增功能的方法。

1. 引入layui和layer库文件

要使用layui和layer组件，需要在页面中引入它们的库文件。可以在layui官网下载最新版本的layui库文件和layer库文件。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  ...
</body>
</html>

2. 在页面中添加按钮

在页面中添加一个按钮，点击此按钮后弹出新增数据的表单。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  <button id="add-btn" class="layui-btn">添加数据</button>
  ...
</body>
</html>

在按钮的click事件中使用layer.open()方法打开弹窗。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  <button id="add-btn" class="layui-btn">添加数据</button>
  <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      $('#add-btn').click(function(){
        layer.open({
          type: 1,
          title: '新增数据',
          area: ['500px', '400px'],
          content: $('#add-form'),
        });
      });
    });
  </script>
  <div id="add-form" style="display:none;">
    <form class="layui-form" action="">
      <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">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" 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="radio" name="sex" value="男" title="男" checked>
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="submit-btn">提交</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

代码中，layer.open()方法中的type参数指定弹窗的类型为1，表示页面层。title参数指定弹窗的标题。area参数指定弹窗的宽度和高度。content参数指定弹窗的内容为一个form表单。

3. 使用layui表单组件

在弹窗中使用layui表单组件，便于获取表单数据并提交。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  <button id="add-btn" class="layui-btn">添加数据</button>
  <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      $('#add-btn').click(function(){
        layer.open({
          type: 1,
          title: '新增数据',
          area: ['500px', '400px'],
          content: $('#add-form'),
        });
      });
      form.on('submit(submit-btn)', function(data){
        console.log(data.field);
        // TODO: 提交数据到后台
        return false;
      });
    });
  </script>
  <div id="add-form" style="display:none;">
    <form class="layui-form" action="">
      <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">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" 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="radio" name="sex" value="男" title="男" checked>
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="submit-btn">提交</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

代码中，form.on()方法监听表单的提交事件。submit-btn参数为button的lay-filter属性，用于标识该按钮为表单的提交按钮。data.field是表单中所有的字段及其值的集合。

4. 提交数据到后台

要提交新增数据到后台，可以使用ajax向后台发送请求。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  <button id="add-btn" class="layui-btn">添加数据</button>
  <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      $('#add-btn').click(function(){
        layer.open({
          type: 1,
          title: '新增数据',
          area: ['500px', '400px'],
          content: $('#add-form'),
        });
      });
      form.on('submit(submit-btn)', function(data){
        console.log(data.field);
        $.ajax({
          url: '/api/add',
          type: 'POST',
          dataType: 'json',
          data: data.field,
          success: function(res){
            if(res.code == 0){
              layer.msg('添加成功');
              layer.closeAll('page');
            }else{
              layer.msg('添加失败：' + res.msg);
            }
          },
          error: function(xhr){
            layer.msg('添加失败：' + xhr.statusText);
          }
        });
        return false;
      });
    });
  </script>
  <div id="add-form" style="display:none;">
    <form class="layui-form" action="">
      <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">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" 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="radio" name="sex" value="男" title="男" checked>
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="submit-btn">提交</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

代码中，$.ajax()方法向服务器发送请求，url参数是后台处理新增数据的接口地址。type参数指定请求的类型为POST。dataType参数指定接收到的数据类型为json。data参数指定要发送到服务器的数据。success参数指定请求成功后执行的回调函数。error参数指定请求出错后执行的回调函数。

5. 完整示例代码


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增数据</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
  <button id="add-btn" class="layui-btn">添加数据</button>
  <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      $('#add-btn').click(function(){
        layer.open({
          type: 1,
          title: '新增数据',
          area: ['500px', '400px'],
          content: $('#add-form'),
        });
      });
      form.on('submit(submit-btn)', function(data){
        console.log(data.field);
        $.ajax({
          url: '/api/add',
          type: 'POST',
          dataType: 'json',
          data: data.field,
          success: function(res){
            if(res.code == 0){
              layer.msg('添加成功');
              layer.closeAll('page');
            }else{
              layer.msg('添加失败：' + res.msg);
            }
          },
          error: function(xhr){
            layer.msg('添加失败：' + xhr.statusText);
          }
        });
        return false;
      });
    });
  </script>
  <div id="add-form" style="display:none;">
    <form class="layui-form" action="">
      <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">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" 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="radio" name="sex" value="男" title="男" checked>
          <input type="radio" name="sex" value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="submit-btn">提交</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

本文介绍了使用layer弹窗和layui表单做新增功能的方法。通过本文的介绍，读者可以了解到如何在页面中使用layer弹窗和layui表单组件，以及如何将表单数据提交到后台。

使用layer弹窗和layui表单做新增功能的方法