一. Layui form
1.Layui 表单-form
标签区域
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 选择框
请选择
layer
form
layim
0001
lay-search开启搜索匹配功能value=””预留”请选择”的提示空间disabled禁用选择selected默认选择项optgroup给select分组
3.文本域
class=”layui-textarea”：layui.css提供的通用CSS类
二. 利用工具快速构建表单
打开网址:Pear Admin Layui
找到开发工具–》表单构建
将代码复制到html文件中，修改对应name的值,代码如下:
layui-form
输入框
密码框
选择框
北京
上海
广州
深圳
杭州
复选框
开关
单选框
文本域
立即提交
重置
layui.use('form', function(){
var form = layui.form;
form.on('submit(formSave)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
三.通过AJAX与后端交互
1.以下代码是，点击提交按钮后弹框
layui.use('form', function(){
var form = layui.form;
form.on('submit(formSave)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
2.截图如下:
3.通过AJAX与后端交互，修改前端代码如下:
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; // 别忘记这行，防止页面跳转
});
});
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更新:
选择框
3.AJAX请求数据:
Original: https://blog.csdn.net/qq_27454363/article/details/125271784
Author: z60015260
Title: Layui form与后端交互
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/744194/
转载文章受原作者版权保护。转载请注明原作者出处！