一. Layui form
1.Layui 表单-form
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
type-value对应值属性
text | 输入框 |
password | 密码框 |
checkbox | 复选框;加参数 lay-skin:"primary" 原始风格 lay-skin:"switch" 开关风格,lay-text="开启|关闭" 开关风格设置文本内容 |
radio | 单选框 |
layui字段
required | 注册浏览器所规定的必填字段 |
lay-verify | 注册form模块需要验证的类型 |
class="layui-input" | layui.css提供的通用CSS类 |
2.Layui 选择框
<select name="city" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="010">layer</option>
<option value="021" disabled>form</option>
<option value="0571" selected>layim</option>
<optgroup label="其他">
<option value="0001">0001</option>
</optgroup>
</select>
lay-search | 开启搜索匹配功能 |
value="" | 预留“请选择”的提示空间 |
disabled | 禁用选择 |
selected | 默认选择项 |
optgroup | 给select分组 |
3.文本域
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
class="layui-textarea":layui.css提供的通用CSS类
二. 利用工具快速构建表单
打开网址:Pear Admin Layui
找到开发工具--》表单构建
将代码复制到html文件中,修改对应name的值,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui-form</title>
<link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<form class="layui-form" action="" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="inputText" 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="password" name="inputPassword" 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">
<select name="inputSelect" lay-verify="required" lay-search>
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="inputCheckbox" title="写作">
<input type="checkbox" name="inputCheckbox" title="阅读" checked>
<input type="checkbox" name="inputCheckbox" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="inputSwitch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="inputRadio" value="男" title="男">
<input type="radio" name="inputRadio" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="inputTextarea" 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="formSave">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('form', function(){
var form = layui.form;
form.on('submit(formSave)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
三.通过AJAX与后端交互
1.以下代码是,点击提交按钮后弹框
<script>
layui.use('form', function(){
var form = layui.form;
form.on('submit(formSave)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
2.截图如下:
3.通过AJAX与后端交互,修改前端代码如下:
<script>
layui.use('form', function(){
var form = layui.form, //加载表单
$ = layui.$; //加载jquery
form.on('submit(formSave)', function(data){//监听按钮
$.ajax({
url:"/submit-form-submit", //提交请求的URL
type:"post", //请求方式get,post,put,delete等
data:data.field, //提交的表单数据
success:function(result){
if (result.success){
layer.msg(result.msg, { icon: 1, time: 2000, title:'成功' }) //返回数据成功时弹框
}
else{
layer.msg(result.msg, { icon: 2, time: 2000, title:'失败' }) //返回数据失败时弹框
}
},
error:function(result){
alert("接口错误!!!"); //无返回或处理有报错时弹框
}
});
return false; // 别忘记这行,防止页面跳转
});
});
</script>
4.后端flask接收前端提交的数据:
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.get('/')
def index():
return render_template('layui-form.html')
@app.post('/submit-form-submit')
def submit_form_post():
post_data = request.form
print('AJAX-DATA:', post_data)
# 返回json数据, success, msg和前端对应
return jsonify({'success': 1, 'msg': '数据接收成功'})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)
后端截图:
前端提交时截图:
四.从后端获取数据更新选择框的内容
1.将html文件select下的option标签删除:
2.标签select增加id, 后面可通过id更新:
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select id="inputSelect" name="inputSelect" lay-verify="required" lay-search>
</select>
</div>
</div>
3.AJAX请求数据:
<script>标签增加AJAX请求,以及对返回数据的处理
$(function(){ //js 加载时AJAX请求
$.ajax({
url:'/get-select-content',
type:'post',
dataType:'json',
success:function(result){
var list = result.data;
var str = "<option value=''></option>"
for (var i=0; i<list.length;i++) {
// value 和 name 需和后端返回的数据对应
str += "<option value=\""+list[i].value+"\">"+ list[i].name+"</option>"
}
console.log(str); //打印str
$('#inputSelect').html(str); //html赋值
form.render('select') //重新渲染 form的select内容
},
error:function(){
layer.msg('部门查询API出错!');
}
})
});
4.后端增加返回内容:
@app.post('/get-select-content')
def get_select_content():
data_list = []
city_list = ['北京', '上海', '广州', '深圳', '杭州']
for i in range(len(city_list)):
item_data = {
"value": i+1,
"name": city_list[i]
}
data_list.append(item_data)
return jsonify(data=data_list, msg='success')
返回data的内容:
[{'value': 1, 'name': '北京'}, {'value': 2, 'name': '上海'}, {'value': 3, 'name': '广州'}, {'value': 4, 'name': '深圳'}, {'value': 5, 'name': '杭州'}]
5.页面效果如下:
6.注意事项:
1.console.log(str)可以打印返回的数据,但选择框内容为空,请检查是否漏掉form.render('select');
以下摘自Layui-官方文档:
有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。
第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:
参数(type)值 | 描述 |
---|---|
select | 刷新select选择框渲染 |
checkbox | 刷新checkbox复选框(含开关)渲染 |
radio | 刷新radio单选框框渲染 |
- form.render(); //更新全部
- form.render('select'); //刷新select选择框渲染
2.如果select有默认值,可以通过以下方法更新:
value对应option的value或text
1.通过显示内容模糊匹配, 不是很精确,value为text时,例如value为‘北京’,更新选中内容
$("#inputSelectoption:contains("+value+")").attr("selected",true);
2.通过显示内容精确匹配,更新选中内容
$('#inputSelect option').filter(function(){return $(this).text()==""+value+"";}).attr("selected",true);
3.通过option的value精确匹配,更新选中内容
$('#inputSelect option').filter(function(){return $(this).val()==""+value+"";}).attr("selected",true);