写一个spring的项目,在用layui编写登录页面时,如何实现以下功能。将表单里的数据全部提交到“/login”下并进行校验同时返回信息到前端。我怎么改都成功不了。
2条回答 默认 最新
- L丶cz 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> 用户登录 </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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 Attention is all you need 的代码运行
- ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
- ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
- ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
- ¥30 关于<main>标签页面跳转的问题
- ¥80 部署运行web自动化项目
- ¥15 腾讯云如何建立同一个项目中物模型之间的联系
- ¥30 VMware 云桌面水印如何添加
- ¥15 用ns3仿真出5G核心网网元
- ¥15 matlab答疑 关于海上风电的爬坡事件检测