简单实现登录界面

1.首先是JSP页面里面的按键设置。

//输入框和“记住我”格式设置
<div class="login-box">
  <form class="login-form" method="post" action="/system/login">
    <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>登陆&nbsp;<span id="errorMessage"></span></h3>
    <div class="form-group">
      <label class="control-label">用户名</label>
      <input name="username" class="form-control" type="text" id="username" placeholder="用户名" autofocus>
    </div>
    <div class="form-group">
      <label class="control-label">密码</label>
      <input name="password" class="form-control" type="password" id="password" placeholder="密码">
    </div>
    <div class="form-group">
      <div class="utility">
        <div class="animated-checkbox">
          <label>
            <input type="checkbox" value="1" name="remember" id="remember"><span class="label-text">记住我</span>
          </label>
        </div>
      </div>
    </div>
    <div class="form-group btn-container">
    <!-- button 在form表单中默认就是submit -->
      <button type="button" class="btn btn-primary btn-block" id="btn">
      <i class="fa fa-sign-in fa-lg fa-fw"></i>登陆
      </button>
    </div>
  </form>
</div>

2.然后开始绑定事件

//输入框和“记住我”格式设置
  <script type="text/javascript">
  	$(function() {
  		$("#btn").click(function() {
  			login();
	})
	
	function login() {
  			//发送请求
  			$(".login-form").ajaxSubmit({
  				success: function(msg){
  					if (msg.success) { //登录成功
					location.href = "/system/index";
				}else {   //不成功
					$("#errorMessage").text(msg.error).css("color","red").css("fontSize","15");
				}
  				}			
  			})
	}
	
	//回车登录
	$(document).on("keypress",function(e){
		if (e.keyCode == 13) {
			//登录
			login();
		}
	})
	
	//记住我
	//获取cookie信息
	var cookie1 = document.cookie;
	//console.debug(cookie1);
 			if (cookie1.indexOf("username") != -1) {  //用户名和密码
 				
 				var username = null;
 				var password = null;
		//根据  分割
 				var arr = cookie1.split(";");
 				//遍历
 				for (var i = 0; i < arr.length; i++) {
			//获取username
			if (arr[i].indexOf("username") != -1) {
				username = arr[i].substring(arr[i].lastIndexOf("=")+1)
			} 
			//获取username
			if (arr[i].indexOf("password") != -1) {
				password = arr[i].substring(arr[i].lastIndexOf("=")+1)
			} 
		}
 				
 				//赋值
 				$("#username").val(username);
 				$("#password").val(password);
 				$("#remember").prop("checked", true);
		}else { //取消记住我
			$("#username").val("");
	 				$("#password").val("");
	 				$("#remember").prop("checked", false);
		}
	})
  </script>       

3.发送到后台后通过Controller进行跳转

//后台跳转，因为配置类了视图解析器，所以可以直接跳转
@Controller
@RequestMapping("/system")
public class SystemController {
	@RequestMapping("/index")
	private String goIndex() {	
		return "index";
	}
}

4.最后跳转到自己写好的index首页里面去