JSp+ajax用户登录验证
2014-04-11 17:54
232 查看
0
用户登陆界面,想要实现输入账号之后离开输入框就验证该账号是否存在,输入角色、账号、密码之后,点击登录,如果正确就跳转到index.jsp,错误不跳转并且在密码输入框下显示提示信息;有一个没输入就提示,信息也是在密码输入框下。
我现在的问题是:若果什么也不输,点击登录,会闪一下,但闪过之后就是重置了页面。输入正确也是闪一下就重置页面.账号验证没问题,就是登录有问题,但是搞不定,大侠们看看吧!
login.jsp
Java代码
<form id="form" name="form" method="post" action="" >
<table border="0">
<tr>
<td align="right">角色类型:</td>
<td><select name="role" id="role" onBlur="checkRole(this)">
<option value="0">-请选择角色-</option>
<%
List<Role> list = new ArrayList<Role>();
RoleDao dao = new RoleDaoImpl();
list = dao.findAllRoles();//调用实现类的查询全部方法
for (int i = 0; i < list.size(); i++) {
Role r = list.get(i);
%>
<option value="<%=r.getR_id()%>"><%=r.getR_name()%></option>
<%
}
%>
</select>
</td>
<td align="left">
<span id="roleSpan"></span>
</td>
</tr>
<tr>
<td align="right">账号:</td>
<td>
<input type="text" name="number" id="number" onblur="checkNumber(this)">
</td>
<td width="256" align="left">
<span id="numberSpan"></span>
</td>
</tr><!-- 当输入名字后离开输入框即调用-->
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd" id="pwd" onBlur="checkPsw(this)" >
</td>
<td align="left">
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td align="left"> <span id="feedback_info"></span></td>
</tr>
<tr>
<td colspan="1">
<input type="submit" value="登录" onclick="checkLogin(this.form)"/>
<input type="button" value="注册"
onclick="javascript:window.location.href='User/Register.jsp'"></td>
</tr>
</table>
</form>
login.js
Java代码
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
var xmlHttp = new XMLHttpRequest(); //mozilla浏览器
}
else if (window.ActiveXObject) {
try {
var xmlHttp = new ActiveX0bject("Msxml2.XMLHTTP"); //IE老版本
}
catch (e)
{ }
try {
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}
catch (e)
{ }
}
if (!xmlHttp) {
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
else
return xmlHttp;
////}///////花括号放错地方
}
// 检查账号,给出提示信息
function checkNumber(Number) {
var numberSpan = document.getElementById("numberSpan");
if (Number.value == "") {
numberSpan.innerHTML = "账号必须填写".fontcolor("red");
return false;
} else {
xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量,这里访问不到xmlHttp,要给xmlHttp变量赋值才行
var url="servlet/CheckNumberServlet?number="+Number.value+"&LoginTime="+new Date().getTime();
url = encodeURI(url); //转换码后再传输
xmlHttp.open("GET",url,true);//加时间戳防止IE缓存
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );
xmlHttp.onreadystatechange = handleStateChange1;
xmlHttp.send(null);
return true;
}
}
function handleStateChange1() {
var numberSpan = document.getElementById("numberSpan");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
// alert("来自服务器的响应:"+xmlHttp.responseText);
if (xmlHttp.responseText == 'true') {///////responseText是字符串,不能和boolean变量直接比较
// alert("存在");
numberSpan.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
else if (xmlHttp.responseText == 'false') {///////responseText是字符串,不能和boolean变量直接比较
// alert("不存在");
numberSpan.innerHTML = "账号不存在".fontcolor("red");
return false;
}
}
else alert("服务器端错误");
}
}
// 检查密码,给出提示信息
function checkPsw(pswNode) {
var spanNode1 = document.getElementById("pswSpan");
var Role= document.getElementById("role");
var Number= document.getElementById("number");
if (pswNode.value == "") {
spanNode1.innerHTML = "密码必须填写".fontcolor("red");
return false;
} else {
pwdSpan.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
}
// 检查是否选中角色
function checkRole(selNode) {
var index = selNode.selectedIndex;// 获得选中下标
var spanNode1 = document.getElementById("roleSpan");
if (index <= 0) {
spanNode1.innerHTML = "必须选择角色".fontcolor("red");
return false;
} else {
spanNode1.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
}
// 检查表单
function checkLogin(o) {
var Role=o.role;
var Number= o.number;
var Pwd= o.pwd;
if(checkNumber(Number)&&checkPsw(Psw) &&checkRole(Role))
{
xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量,这里访问不到xmlHttp,要给xmlHttp变量赋值才行
var url="servlet/CheckLoginServlet?number="+Number.value+"&role="+Role.value+"&pwd="+Pwd.value+"&LoginTime="+new Date().getTime();
url = encodeURI(url); //转换码后再传输
xmlHttp.open("GET",url,true);//加时间戳防止IE缓存
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );
xmlHttp.onreadystatechange = handleStateChange2;
xmlHttp.send(null);
return true;
}
else{
document.getElementById("feedback_info").innerHTML="请填写每一项".fontcolor("red");
return false;
}
}
function handleStateChange2() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert("来自服务器的响应:" + xmlHttp.responseText);
if(xmlHttp.responseText == '0'){
document.getElementById("feedback_info").innerHTML="账号与密码不匹配".fontcolor("red");
return false;
}
else if(xmlHttp.responseText == '1'){
document.getElementById("feedback_info").innerHTML="";
window.location.href="index.jsp";
return true;
}
}
else alert("服务器端错误");
}
}
chuckLoginservlet
Java代码
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
doPost(request, response);// 调用doPost方法
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
String number="";
try {
number = new String(request.getParameter("number").getBytes(
"ISO-8859-1"), "UTF-8");
} catch (Exception e1) {
System.out.println("number为空");
}
String role="0";
int rID=0;
try {
role = new String(request.getParameter("role").getBytes(
"ISO-8859-1"), "UTF-8");
rID=Integer.parseInt(role);//把获得的role的值转成整型
} catch (Exception e1) {
System.out.println(request.getParameter("role")+"******role");
}
String pwd="";
try {
pwd = new String(request.getParameter("pwd").getBytes(
"ISO-8859-1"), "UTF-8");
} catch (Exception e) {
System.out.println(request.getParameter("pwd")+"****pwd");
}
// String txt = new String(number.getBytes("ISO-8859-1"), "UTF-8");
// System.out.println(txt+"********");
PrintWriter out = response.getWriter();
User u = new User();
UserDao ud = new UserDaoImpl();
u = ud.findUserByNumber(number);//通过账号找到用户对象
if (u != null) {// 找到该用户
int u_id = u.getU_id();// 获得该用户的ID
UserRole ur = new UserRole();
UserRoleDao urd = new UserRoleDaoImpl();
ur = urd.findUserRoleByUserId(u_id);// 找到中间表UserRole的记录
int r_id = ur.getRole().getR_id();// 由Userrole表找到Role表的相对应角色名称
if (r_id==rID && u.getU_password().equals(pwd))// 如果数据中的角色和密码与之对应
{
out.write("1");//1表示验证通过
} else {
out.write("0");//0表示密码与账号不匹配
}
}
out.flush();
out.close();
}
JSp+ajax用户登录验证0
用户登陆界面,想要实现输入账号之后离开输入框就验证该账号是否存在,输入角色、账号、密码之后,点击登录,如果正确就跳转到index.jsp,错误不跳转并且在密码输入框下显示提示信息;有一个没输入就提示,信息也是在密码输入框下。
我现在的问题是:若果什么也不输,点击登录,会闪一下,但闪过之后就是重置了页面。输入正确也是闪一下就重置页面.账号验证没问题,就是登录有问题,但是搞不定,大侠们看看吧!
login.jsp
Java代码
<form id="form" name="form" method="post" action="" >
<table border="0">
<tr>
<td align="right">角色类型:</td>
<td><select name="role" id="role" onBlur="checkRole(this)">
<option value="0">-请选择角色-</option>
<%
List<Role> list = new ArrayList<Role>();
RoleDao dao = new RoleDaoImpl();
list = dao.findAllRoles();//调用实现类的查询全部方法
for (int i = 0; i < list.size(); i++) {
Role r = list.get(i);
%>
<option value="<%=r.getR_id()%>"><%=r.getR_name()%></option>
<%
}
%>
</select>
</td>
<td align="left">
<span id="roleSpan"></span>
</td>
</tr>
<tr>
<td align="right">账号:</td>
<td>
<input type="text" name="number" id="number" onblur="checkNumber(this)">
</td>
<td width="256" align="left">
<span id="numberSpan"></span>
</td>
</tr><!-- 当输入名字后离开输入框即调用-->
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd" id="pwd" onBlur="checkPsw(this)" >
</td>
<td align="left">
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td align="left"> <span id="feedback_info"></span></td>
</tr>
<tr>
<td colspan="1">
<input type="submit" value="登录" onclick="checkLogin(this.form)"/>
<input type="button" value="注册"
onclick="javascript:window.location.href='User/Register.jsp'"></td>
</tr>
</table>
</form>
login.js
Java代码
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
var xmlHttp = new XMLHttpRequest(); //mozilla浏览器
}
else if (window.ActiveXObject) {
try {
var xmlHttp = new ActiveX0bject("Msxml2.XMLHTTP"); //IE老版本
}
catch (e)
{ }
try {
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}
catch (e)
{ }
}
if (!xmlHttp) {
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
else
return xmlHttp;
////}///////花括号放错地方
}
// 检查账号,给出提示信息
function checkNumber(Number) {
var numberSpan = document.getElementById("numberSpan");
if (Number.value == "") {
numberSpan.innerHTML = "账号必须填写".fontcolor("red");
return false;
} else {
xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量,这里访问不到xmlHttp,要给xmlHttp变量赋值才行
var url="servlet/CheckNumberServlet?number="+Number.value+"&LoginTime="+new Date().getTime();
url = encodeURI(url); //转换码后再传输
xmlHttp.open("GET",url,true);//加时间戳防止IE缓存
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );
xmlHttp.onreadystatechange = handleStateChange1;
xmlHttp.send(null);
return true;
}
}
function handleStateChange1() {
var numberSpan = document.getElementById("numberSpan");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
// alert("来自服务器的响应:"+xmlHttp.responseText);
if (xmlHttp.responseText == 'true') {///////responseText是字符串,不能和boolean变量直接比较
// alert("存在");
numberSpan.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
else if (xmlHttp.responseText == 'false') {///////responseText是字符串,不能和boolean变量直接比较
// alert("不存在");
numberSpan.innerHTML = "账号不存在".fontcolor("red");
return false;
}
}
else alert("服务器端错误");
}
}
// 检查密码,给出提示信息
function checkPsw(pswNode) {
var spanNode1 = document.getElementById("pswSpan");
var Role= document.getElementById("role");
var Number= document.getElementById("number");
if (pswNode.value == "") {
spanNode1.innerHTML = "密码必须填写".fontcolor("red");
return false;
} else {
pwdSpan.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
}
// 检查是否选中角色
function checkRole(selNode) {
var index = selNode.selectedIndex;// 获得选中下标
var spanNode1 = document.getElementById("roleSpan");
if (index <= 0) {
spanNode1.innerHTML = "必须选择角色".fontcolor("red");
return false;
} else {
spanNode1.innerHTML = "<img src='Img/g.gif'>";
document.getElementById("feedback_info").innerHTML="";
return true;
}
}
// 检查表单
function checkLogin(o) {
var Role=o.role;
var Number= o.number;
var Pwd= o.pwd;
if(checkNumber(Number)&&checkPsw(Psw) &&checkRole(Role))
{
xmlHttp = createXMLHttpRequest(); //createXMLHttpRequest申明的是局部变量,这里访问不到xmlHttp,要给xmlHttp变量赋值才行
var url="servlet/CheckLoginServlet?number="+Number.value+"&role="+Role.value+"&pwd="+Pwd.value+"&LoginTime="+new Date().getTime();
url = encodeURI(url); //转换码后再传输
xmlHttp.open("GET",url,true);//加时间戳防止IE缓存
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );
xmlHttp.onreadystatechange = handleStateChange2;
xmlHttp.send(null);
return true;
}
else{
document.getElementById("feedback_info").innerHTML="请填写每一项".fontcolor("red");
return false;
}
}
function handleStateChange2() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert("来自服务器的响应:" + xmlHttp.responseText);
if(xmlHttp.responseText == '0'){
document.getElementById("feedback_info").innerHTML="账号与密码不匹配".fontcolor("red");
return false;
}
else if(xmlHttp.responseText == '1'){
document.getElementById("feedback_info").innerHTML="";
window.location.href="index.jsp";
return true;
}
}
else alert("服务器端错误");
}
}
chuckLoginservlet
Java代码
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
doPost(request, response);// 调用doPost方法
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
String number="";
try {
number = new String(request.getParameter("number").getBytes(
"ISO-8859-1"), "UTF-8");
} catch (Exception e1) {
System.out.println("number为空");
}
String role="0";
int rID=0;
try {
role = new String(request.getParameter("role").getBytes(
"ISO-8859-1"), "UTF-8");
rID=Integer.parseInt(role);//把获得的role的值转成整型
} catch (Exception e1) {
System.out.println(request.getParameter("role")+"******role");
}
String pwd="";
try {
pwd = new String(request.getParameter("pwd").getBytes(
"ISO-8859-1"), "UTF-8");
} catch (Exception e) {
System.out.println(request.getParameter("pwd")+"****pwd");
}
// String txt = new String(number.getBytes("ISO-8859-1"), "UTF-8");
// System.out.println(txt+"********");
PrintWriter out = response.getWriter();
User u = new User();
UserDao ud = new UserDaoImpl();
u = ud.findUserByNumber(number);//通过账号找到用户对象
if (u != null) {// 找到该用户
int u_id = u.getU_id();// 获得该用户的ID
UserRole ur = new UserRole();
UserRoleDao urd = new UserRoleDaoImpl();
ur = urd.findUserRoleByUserId(u_id);// 找到中间表UserRole的记录
int r_id = ur.getRole().getR_id();// 由Userrole表找到Role表的相对应角色名称
if (r_id==rID && u.getU_password().equals(pwd))// 如果数据中的角色和密码与之对应
{
out.write("1");//1表示验证通过
} else {
out.write("0");//0表示密码与账号不匹配
}
}
out.flush();
out.close();
}
相关文章推荐
- JSP中filter过滤器验证用户登录
- jQuery.ajax 用户登录验证代码
- JSP+JDBC+SQLSERVER2000用户登录验证实例
- JSP中filter过滤器验证用户登录
- 利用Servlet和jsp实现客户端与服务器端的用户登录信息验证
- 用ajax和jsp完成用户注册的用户名验证(用户名唯一)
- 使用Ajax异步刷新实现登录用户验证
- ajax+springmvc+jquery用户登录验证
- JSP中filter过滤器验证用户登录
- Ajax用户登录权限验证
- JSP中filter过滤器验证用户登录(
- 一个很好的ajax入门小实例,用户登录验证
- Ajax 用户登录验证
- jQuery.ajax 用户登录验证代码
- 网站用户登录验证:Servlet+JSP VS Struts书剑恩仇录 推荐
- JSP中使用AJAX验证用户是否存在
- 03-22 Ajax验证用户登录
- 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
- 使用AjaxPro框架实现无刷新用户登录验证【原创】
- SSM框架---二手教材交易系统之用户登录(包括表单提前验证,ajax)