layui的from表单提交到后台

Posted 2023-04-24

参考技术A 我们在使用layui的时候,一般通常都用ajax去提交数据到后台,但是layui的from表单给我们提供了自动提交的方法,soEasy!!!

上面就是我们使用的from表单,我们的提交按钮必须要在from表单中,并且要加上type="submit"属性

action中的地址是我们 controller的地址

但是我们还要在在表头加上basepath,

这是项目的路径,这样就生效了,就可以直接提交到后台了

LayUi的from组件搭配jQuery提交

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

先看layui介绍：

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

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

一：页面引入jquery相关：

1.1：引入CSS

<link rel="stylesheet" href="$path/layui/css/layui.css" media="all">

1.2：引入js

<script src="$path/layui/layui.js?t=1"></script>

注意，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()