<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>用户登录</title>
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/css/reset.css"/>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"/>
</head>
<body>
<div id="particles-js">
<form class="login layui-form">
<div class="login-top">
登录
</div>
<div class="login-center clearfix">
<!--隐藏的属性 ,默认值是 登录-->
<input type="hidden" name="service" value="login" />
<div class="login-center-img"><img src="static/img/name.png"/></div>
<div class="login-center-input">
<input type="text" name="user_name" placeholder="用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
<div class="login-center-input-text">用户名</div>
</div>
</div>
<div class="login-center clearfix">
<div class="login-center-img"><img src="static/img/password.png"/></div>
<div class="login-center-input">
<input type="password" name="password" placeholder="用户密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
<div class="login-center-input-text">密码</div>
</div>
</div>
<div class="login-center clearfix">
<div class="login-center-img"><img src="static/img/password.png"/></div>
<div class="login-center-input">
<input type="text" name="checkCode" placeholder="验证码" style="width: 130px"/>
<div class="login-center-input-text">验证码</div>
<img id="checkCode" alt="验证码" src="checkCode" style="width: 70px;margin-left: 20px">
</div>
</div>
<div class="login-button" lay-submit lay-filter="loginBtnFilter">
登录
</div>
</form>
<div class="sk-rotating-plane"></div>
</div>
<div style="text-align:center;">
</div>
<!-- scripts -->
<script src="static/layui/layui.js"></script>
<!--引入登录页 "星空粒子" js-->
<script src="static/js/particles.min.js"></script>
<!--登录页调整星空粒子间隔,坐标...-->
<script src="static/js/app.js"></script>
<script type="text/javascript">
//登录页面用到的 layui组件,有表单,弹层,jquery
layui.use(['form','layer','jquery'],function () {
var form = layui.form; //获取表单对象
var layer = layui.layer;//获取弹出层对象
var $ = layui.jquery;//获取layui内置的jquery对象
//提交登陆表单
form.on('submit(loginBtnFilter)',function (d) {
// d.field 等于 {key:value,key:value...}
$.post('user',d.field,function (rs) { //jquery的异步提交
if(rs.code==200){ //如果响应成功,则进入主页面
location.href='page?page=main';
return false;//终止执行
}
$("#checkCode").attr("src","checkCode?"+new Date());
//弹出层的提示信息
layer.msg(rs.msg);
},"json");
return false; //组织表单名默认提交
});
//点击验证码进行切换
$("#checkCode").click(function(){
// 给 img对象的 src属性 ,重新赋值checkCode.do , 时间防止缓存
$(this).attr("src","checkCode?"+new Date());
});
});
</script>
</body>
</html>
扫一扫
5421
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
