<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码登录</title> <script src="layui-v2.5.6/layui/layui.js"></script> <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css"> </head> <body> <div> <form class="layui-form" action="" lay-filter="testform" οnsubmit="return false"> <div class="layui-form-item"> <label class="layui-form-label">账号</label> <div class="layui-input-inline"> <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" name="code" class="layui-input"> <img src="/CodeServlet" οnclick="this.src=this.src+'?'+Math.random()" style="width: 100px;height: 70px" id="img"> <a href="#" οnclick="document.getElementById('img').onclick()">换一张?</a><br/> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formLogin">登录</button> </div> </div> </form> </div> <script> layui.use(['form','jquery','layer'],function () { var layer=layui.layer; var form=layui.form; var $=layui.jquery; form.on('submit(formLogin)', function(data){ console.log(data.field) //data中的form下的 name 属性值 //点击 发送ajax 给后台 $.ajax({ url:'/LoginServlet', type:'POST', data:data.field, success:function (res) { console.log(res) if(res.code==400){ layer.msg(res.msg) } if(res.code==4001){ layer.msg(res.msg) } if(res.code==0){ //需要跳转 到 后台界面 window.location.href="/home.html" } }, dataType:'json' }); }); }); </script> </body> </html>
08-14