1、导入两个js文件
1）、jquery-1.4.js
2）、jquery.cookie.js
2、login.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script> <script type="text/javascript"> function addCookie(name, value, days, path) { /**添加设置cookie**/ var name = escape(name); var value = escape(value); var expires = new Date(); //设置cookie保存的时间 expires.setTime(expires.getTime() + days * 3600000 * 24); //path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用 path = path == "" ? "" : ";path=" + path; //GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC //参数days只能是数字型 var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } function getCookieValue(name) { /**获取cookie的值，根据cookie的键获取值**/ //用处理字符串的方式查找到key对应value var name = escape(name); //读cookie属性，这将返回文档的所有cookie var allcookies = document.cookie; //查找名为name的cookie的开始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有该名字的cookie，那么提取并使用它的值 if (pos != -1) { //如果pos值为-1则说明搜索"version="失败 var start = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start, end); //提取cookie的值 return (value); //对它解码 } else { //搜索失败，返回空字符串 return ""; } } function deleteCookie(name, path) { /**根据cookie的键，删除cookie，其实就是设置其失效**/ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path; } /**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/ window.onload = function(){ //获取cookie中存放的用户名 var userNameValue = getCookieValue("userName"); document.getElementById("userName").value = userNameValue; //获取cookie中存放的密码 var userPassValue = getCookieValue("userPass"); document.getElementById("password").value = userPassValue; //如果账号密码为空则弹出提示，输入用户名密码 if(userNameValue==""&&userPassValue==""){ $("input[name='userName']").focus(); //如果账号密码不为空则直接执行登录 }else if(userNameValue!=""&&userPassValue!=""){ var vdata = { userName : userNameValue, password : userPassValue }; $.post("tevo_loginInit.action", vdata, function(data) { if (data == "succ") { $(".login_info").show(); $(".login_info").html(" 正在登录中..."); location.href = "main.action"; } else if (data == "error1") { alert("用户未分配角色或权限！"); } else if (data == "error2") { alert("用户无效！"); } else if (data == "error3") { alert("用户未分配角色！"); } else if (data == "error4") { alert("用户角色未分配权限！"); } else if (data == "error5") { alert("用户所分配权限未分配功能！"); } else { alert("用户名或者密码错误，请重新输入！"); } }); } }; // 回车登录 function keyLogin() { $("input[name='userName']").keydown(function(event) { var event = arguments.callee.caller.arguments[0] || window.event;// 消除浏览器差异 if (event.keyCode == 13) { $("input[name='password']").focus(); } }); $("input[name='password']").keydown(function(event) { if (event.keyCode == 13) { userLogin(); document.getElementByIdx_x("userLogin").click(); } }); } function userLogin() { /**用户登录，其中需要判断是否选择记住密码**/ //简单验证一下 var userName = document.getElementById("userName").value; if (userName == '') { alert("请输入用户名！"); return; } var userPass = document.getElementById("password").value; if (userPass == '') { alert("请输入密码！"); return; } var objChk = document.getElementById("chkRememberPass"); if (objChk.checked) { //添加cookie addCookie("userName", userName, 365, "/"); addCookie("userPass", userPass, 365, "/"); var vuserName = $("#userName").val(); var vpassword = $("#password").val(); if (vuserName == "" || vuserName == undefined || vuserName == null) { alert("用户名不能为空"); return false; } else if (vpassword == "" || vpassword == undefined || vpassword == null) { alert("密码不能为空"); return false; } var vdata = { userName : vuserName, password : vpassword }; $.post("tevo_loginInit.action", vdata, function(data) { if (data == "succ") { $(".login_info").show(); $(".login_info").html(" 正在登录中..."); location.href = "main.action"; } else if (data == "error1") { alert("用户未分配角色或权限！"); } else if (data == "error2") { alert("用户无效！"); } else { alert("用户名或者密码错误，请重新输入！"); } }); } else { //删除cookie的内容 deleteCookie("userName", "/"); deleteCookie("userPass", "/"); var vuserName = $("#userName").val(); var vpassword = $("#password").val(); if (vuserName == "" || vuserName == undefined || vuserName == null) { alert("用户名不能为空"); return false; } else if (vpassword == "" || vpassword == undefined || vpassword == null) { alert("密码不能为空"); return false; } var vdata = { userName : vuserName, password : vpassword }; $.post("tevo_loginInit.action", vdata, function(data) { if (data == "succ") { $(".login_info").show(); $(".login_info").html(" 正在登录中..."); location.href = "main.action"; } else if (data == "error1") { alert("用户未分配角色或权限！"); } else if (data == "error2") { alert("用户无效！"); } else { alert("用户名或者密码错误，请重新输入！"); } }); } } </script> <title>登录</title> <style type="text/css"> .center-in-center { position: absolute; top: 50%; left: 50%; } </style> </head> <body background="${pageContext.request.contextPath}/images/login.jpg" onkeydown="keyLogin();"> <div class="center-in-center"> <form id="login"> 用户名： <input type="text" name="userName" id="userName" placeholder="请输入用户名" /><br /> <br /> 密码： <input type="password" name="password" id="password" placeholder="请输入密码" /> <br /> <br /> <br /> <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" checked="checked" /> <span style="font-size:12px; color:blue; vertical-align:middle;">记住密码</span> <br /> <br /> <div align="center"> <input type="button" id="login" onclick="userLogin()" value="登录" /> <input type="reset" value="重置" /> </div> <br /> <div class="login_info" style="display:none;"></div> <div class="login_info2"> </div> </form> </div> </body> </html>