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>
原文地址：https://www.cnblogs.com/shoose/p/8393735.html
时间： 2024-08-11 03:24:27