LayUi的from组件搭配jQuery提交
凯哥最近正在学习layui这个后台框架。
先看layui简介：
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
本文将介绍layui form组件+jquery提交。
一：页面引入jquery相关：
1.1：引入CSS
981cfbb3dbd03402cd4bcc7449071763.png
<link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">1.2：引入js
b45dee4554a6e03eb263cf89bc089c7a.png
<script src="${path}/layui/layui.js?t=1"></script>注意，js在下面位置放的。
from内容：
dcfb16f1431a2e77237056170d94447a.png
这里需要记住，from的id为：form_
立即提交的lay-filter是：formSub
下面看看js写法：
layui.config({
base: '../' //静态资源所在路径
}).extend({
index: 'layuiadmin/lib/index' //主入口模块
}).use(['index', 'form'], function(){
var $ = layui.$
,admin = layui.admin
,element = layui.element
,form = layui.form;
form.render(null, 'component-form-element');
element.render('breadcrumb', 'breadcrumb');
form.on('submit(formSub)', function(data){
layer.msg(JSON.stringify(data.field));
$.ajax({
url: '/autocode/get-table',
data: $('#form_').serialize(),
type: "POST",
dataType: "json",
success:function (data) {
$(data.elem).removeClass('layui-btn-disabled').prop('disabled', false);
if(data.status == 0){
layer.msg(data.message, {icon: 6, time: 1000}, function() {
window.location.href= data.data;
});
}else{
layer.msg(data.message);
}
}
});
return false;
});
});
bfe475afc1107735eb6bf053293be0f2.png
说明：
这里的form.on('submit(formSub)', function(data)里面submit(提交按钮lay-filter的值)
ajax里面的 data: $('#form_').serialize()其中$("form表单的id值")serialize()
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读