使用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表单组件，以及如何将表单数据提交到后台。