<!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>
|