m0_54928414 2021-12-19 22:09 采纳率: 79.4%
浏览 56
已结题

layui如何将表单数据提交到后台并进行校验

写一个spring的项目，在用layui编写登录页面时,如何实现以下功能。将表单里的数据全部提交到“/login”下并进行校验同时返回信息到前端。我怎么改都成功不了。

  • 写回答

2条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2021-12-22 17:31
    关注
    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="assets/css/login.css" media="all">
    <link rel="icon" href="assets/images/logo_2.png" sizes="32x32">
</head>

<body>
<div class="login-wrapper">
    <div class="login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
            </div>
            <form class="layui-card-body layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="username" type="text" lay-verify="required" placeholder="账号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="required" placeholder="密码"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="validCode" style="width:170px" type="text" lay-verify="required"
                                       placeholder="验证码" class="layui-input">
                                <input name="deviceId" type="hidden"/>
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="#" style="display:none">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                </div>
            </form>
        </div>
    </div>

    <div class="login-footer">
        <p>物联网水表综合平台</p>
    </div>
</div>

<script type="text/javascript" src="assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="module/Math.uuid.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).use(['form'], function () {
        var uuid = Math.uuid();
        var $ = layui.jquery;
        var form = layui.form;

        if (config.getToken()) {
            location.replace('./');
            return;
        }

        // 表单提交
        form.on('submit(login-submit)', function (obj) {
            var field = obj.field;

            layer.load(2);
            $.ajax({
                url: config.base_server + 'api-auth/oauth/token',
                data: field,
                type: 'POST',
                success: function (data) {
                    if (data.access_token) {
                        config.putToken(data);
                        layer.msg('登录成功', {icon: 1, time: 500}, function () {
                            location.replace('./');
                        });
                    } else {
                        layer.closeAll('loading');
                        layer.msg('登录失败，请重试', {icon: 5, time: 500});
                    }
                },
                error: function (xhr) {
                    layer.closeAll('loading');
                    var error;
                    var error_msg;
                    if (xhr.status === 400) {
                        error = JSON.parse(xhr.responseText);
                        error_msg = error.error_description ? error.error_description : error.resp_msg;

                        layer.msg(error_msg ? error_msg : xhr.statusText, {icon: 5, time: 500});
                    } else if (xhr.status === 401) {
                        error = JSON.parse(xhr.responseText);
                        error_msg = error.error_description ? error.error_description : error.resp_msg;

                        layer.msg(error_msg ? error_msg : xhr.statusText, {icon: 5, time: 500});
                    } else if (xhr.status === 500) {
                        layer.msg('服务器异常,请联系管理员', {icon: 5, time: 500});
                    } else if (xhr.status === 0) {
                        layer.msg('网关异常,请联系管理员', {icon: 5, time: 900});
                    }
                }
            });
            return false; //阻止表单跳转
        });

        // 图形验证码
        $('.login-captcha').attr("src", config.base_server + "api-auth/validata/code/" + uuid).attr("style", "")
            .click(function () {
                this.src = this.src + '?timestamp=' + (new Date).getTime();
            });
    });
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • layui前端框架（EasyWeb后台开发框架）
    2020-12-28 18:09
    layui也提供了与后端交互的支持，包括AJAX请求、表单提交、数据校验等，使得前后端协作更为流畅。layui的Form模块提供了丰富的表单操作方法，可以方便地进行表单验证和数据提交，与后端API对接。 对于Java开发者，...
  • layui后台管理系统.rar
    2020-07-09 16:20
    7. 数据交互：虽然系统不包含后端代码，但前端通常会通过Ajax或fetch API与后端API进行交互，获取或提交数据。开发者需要自行设计RESTful API接口，或者利用现有的后端服务。 8. 安全性：尽管此系统是纯前端，但...
  • SSM+Layui实现数据导入.zip
    2020-05-05 19:03
    本项目旨在演示如何在Java环境中通过SSM框架处理用户上传的Excel或CSV等格式的数据，并利用Layui进行前端展示和交互。 1. **Spring框架**：Spring是Java领域的一个核心框架，它提供了依赖注入（DI）和面向切面编程...
  • layui业务办公OA系统后台管理框架模板
    2019-10-31 17:25
    总的来说，“layui业务办公OA系统后台管理框架模板”是一个基于layui前端框架和Java后端技术实现的高效开发模板，它整合了常见的OA系统功能，并提供了一套完整的开发结构，有助于快速构建符合企业需求的OA系统。...
  • layui详细文件上传（前后台）
    2021-12-23 17:20
    顽强的化石的博客 1、form表单进行文件上传，中间表单内容我就省略了，注意：enctype设为multipart/form-data <form class="layui-form layui-form-pane" id="addgoods" style="padding: 15px;display: none" enctype="multipart/...
  • springboot 2.1 + shiro + redis + layUI后台权限管理系统.zip
    2023-08-05 01:27
    【标题】"SpringBoot 2.1 + Shiro + Redis + LayUI后台权限管理系统"是一个典型的Web应用开发项目，主要用于实现企业级的后台管理功能，包括用户权限控制、角色分配、资源管理等。这个系统利用了SpringBoot的快速...
  • laiui实现后台管理系统基础模块
    2024-11-17 19:20
    例如，在使用Layui框架的情况下，开发者可能会利用Layui提供的表格、表单、弹窗等组件来构建界面，并结合后端技术（如Node.js、PHP、Java等）来处理数据逻辑。 此外，实际的项目代码中还需要考虑到安全性和异常处理...
  • 输入框失去焦点对的输入框里面的数据进行表单校验，点击提交按钮也实现表单的校验，调用方法的时候家加不加（）的区别
    2021-11-20 12:48
    508小怪兽的博客 * 根据表单的验证是否成功来设置span标签里面的东西 成功了就现实对号 失败了就显示“您输入的数据格式有误” * 有两个事件触发表单的校验 * 1.点击提交按钮 * 2.输入框失去焦点 * * 我们在这里只实现了 姓名和密码...
  • layui的表单验证支持ajax判断用户名是否重复
    2019-04-15 19:17
    狂风之力的博客 onblur()失去焦点事件，用按钮来手动触发，表单又不太美观，可以使用form表单的verify来进行验证。 html: <div class="layui-form-item"> <label class="layui-form-label">用户名</label> &...
  • 电影院售票管理系统（后端SSM，前台layui，后台Vue）
    2024-05-27 10:31
    MyBatis则是一个持久层框架，简化了SQL操作，通过XML或注解来映射原生信息，将接口和Java的POJOs(Plain Old Java Objects，普通的Java对象)绑定到数据库操作上。 layui是一个轻量级的前端UI框架，以其简洁、直观、...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 2月17日
  • 已采纳回答 2月9日
  • 创建了问题 12月19日