LayUi的from组件搭配jQuery提交

凯哥最近正在学习layui这个后台框架。

先看layui简介:

layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。

本文将介绍layui form组件+jquery提交。

一:页面引入jquery相关:

1.1:引入CSS

1.2:引入js

注意,js在下面位置放的。

from内容:

这里需要记住,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;

});

});

说明:

这里的form.on('submit(formSub)', function(data)里面submit(提交按钮lay-filter的值)

ajax里面的  data: $('#form_').serialize()其中$("form表单的id值")serialize()

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,242评论 0 2
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 3,666评论 0 1
  • 一、定义 layui,是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,跟...
    吴朋个人博客阅读 5,865评论 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,169评论 0 2
  • layui 常用操作 一、index(管理)页面 1.渲染数据表格 html: 修改 删除 js: tabl...
    名刀工一品阅读 3,081评论 0 0