一. 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对应值属性

form-type类型
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单选框框渲染
  1. form.render(); //更新全部
  2. 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); 

# flask # layui # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

avatar 华为云开发者联盟
cover

GaussDB SQL查询语句执行过程解析

avatar 华为云开发者联盟
cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟