LayUi的from组件搭配jQuery提交

  • 作者： 凯哥Java(公众号：凯哥Java)
  • 经验分享
  • 时间：2019-06-13 22:36
  • 4050人已阅读
工作小总结&小工具类 Redis LoRaWAN&ChirpStack AI编程 AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证 小任务 面试其他 职场 淘宝客 支付宝支付 HBuilder X Flink Java集合类 多线程 ES Ribbon eureka Docker java游戏 网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营 书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务 面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯 并发 思维&学习 VUE 宝塔面板 算法刷题 设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列 反射 自定义注解 网络美文 PHP源码 经验分享 资源 git项目 websocket 网赚 数据库读写分离 测试相关 其他随笔 shiro学习系列 fremarker学习系列 学习笔录-spring boot 网络文章 工作小总结
简介 凯哥最近正在学习layui这个后台框架。本文将介绍layuiform组件+jquery提交。一：页面引入jquery相关：1.1：引入CSS1.2：引入js&

🔔🔔好消息!好消息!🔔🔔

有需要的朋友👉:微信号 kaigejava2022

凯哥最近正在学习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()

工作小总结&小工具类 Redis LoRaWAN&ChirpStack AI编程 AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证 小任务 面试其他 职场 淘宝客 支付宝支付 HBuilder X Flink Java集合类 多线程 ES Ribbon eureka Docker java游戏 网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营 书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务 面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯 并发 思维&学习 VUE 宝塔面板 算法刷题 设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列 反射 自定义注解 网络美文 PHP源码 经验分享 资源 git项目 websocket 网赚 数据库读写分离 测试相关 其他随笔 shiro学习系列 fremarker学习系列 学习笔录-spring boot 网络文章 工作小总结

上一篇： 我TMD怎样才能坚持？

下一篇： 解决idea控制台中文乱码问题

TopTop