物业系统之登录界面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html lang="en"> <head> <base href="<%=basePath%>"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>H+ 后台主题UI框架 - 登录</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/login.css" rel="stylesheet"> <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html" /> <![endif]--> <script src="js/jquery.min.js"></script> <script> if (window.top !== window.self) { window.top.location = window.location; } </script> </head> <body class="signin"> <div class="signinpanel"> <div class="row"> <div class="col-sm-7"> <div class="signin-info"> <div class="logopanel m-b"> <h1>欢迎使用</h1> </div> <div class="m-b"></div> <h4>广州尚学堂 <strong>中央绿地广场物业办公系统</strong></h4> <ul class="m-b"> <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势一</li> <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势二</li> <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势三</li> <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势四</li> <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势五</li> </ul> <strong>还没有账号? <a href="#">立即注册»</a></strong> </div> </div> <div class="col-sm-5"> <h4 class="no-margins">登录:</h4> <p class="m-t-md">登录到H+后台主题UI框架</p> <div class="form-group has-error"> <label class="control-label" for="inputError1" id="inputErrorid">欢迎使用本系统!</label> </div> <input id = "usernameid" name="username" type="text" class="form-control uname" placeholder="用户名" /> <input id = "passwordid" name="password" type="password" class="form-control pword m-b" placeholder="密码" /> <div id="uperro" class="form-group has-error"> <label class="control-label" for="inputError1" id="inputErrorid">欢迎使用本系统!</label> </div> <input id="verifycodeid" style="color: black;" type="text" name="verifycode" maxlength="4" class="form-control code " width="50%" placeholder="验证码" /> <div id="verro" class="form-group has-error"> <label class="control-label" for="inputError1" id="inputErrorid">欢迎使用本系统!</label> </div> <span> <img src="image.jsp" id="verId"> </span> <a href="javascript:void(0)" id="verId2">看不清?点击图片更换</a> <a href="">忘记密码了?</a> <button class="btn btn-success btn-block" onclick="login();">登录</button> </div> </div> <div class="signup-footer"> <div class="pull-left"> © 2015 All Rights Reserved. H+ </div> </div> </div> <script type="text/javascript"> $(function(){ $("#verId,#verId2").click(function(){ $("#verId").attr("src","image.jsp?data=" + new Date()); }) }) function login(){ var unameval = $("#usernameid").val(); var pwdval = $("#passwordid").val(); var verifycodeidval = $("#verifycodeid").val(); $.ajax({ url:"login.action", type:"get", async:true, data:{ cmd:"login", username:unameval, password:pwdval, verifycodeid:verifycodeidval }, dataType:"json", success:function(data){ console.log("成功了"); if(data.id == 1){ window.location.href = "index.jsp"; }else if(data.id == 2){ $("#uperro").html(data.content); }else if(data.id == 3){ $("#verro").html(data.content); } } }) } </script> </body> </html>