0 0

JSp+ajax用户登录验证0


用户登陆界面,想要实现输入账号之后离开输入框就验证该账号是否存在,输入角色、账号、密码之后,点击登录,如果正确就跳转到index.jsp,错误不跳转并且在密码输入框下显示提示信息;有一个没输入就提示,信息也是在密码输入框下。

我现在的问题是:若果什么也不输,点击登录,会闪一下,但闪过之后就是重置了页面。输入正确也是闪一下就重置页面.账号验证没问题,就是登录有问题,但是搞不定,大侠们看看吧!
login.jsp
<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">
			                 	&nbsp;
			                    <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">
			                	&nbsp;
			                    <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">
			                 	&nbsp;
			                    <span id="pwdSpan"></span>
			                </td>
				</tr>
				<tr>
			 <td  align="left">&nbsp;<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
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
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();
	}
2013年8月14日 20:09
  • 大小: 3.1 KB

2个答案 按时间排序 按投票排序

1 0

采纳的答案

checkLogin(this.form)"/>  这里是有问题的,知道this代表什么吗?它是代表input这个对象,而this.form就是代表input里面有一个 form这个属相的值,最关键是你的type="submit" 这个就是提交,而你的表单action都是空的,所以那里都没提交上去
你这里有四个错误

2013年8月14日 20:34
0 0

 var Role=document.getElementById("role");
    var Number=document.getElementById("number");
    var Pwd=document.getElementById("pwd");
其它地方也需要改呀
if(checkNumber(Number)&&checkPsw(Psw) &&checkRole(Role))  这里改了吗
你上面获得是对象,并且Number这个是js的内置数字对象,不要使用,另外改个名字最好
可以改为

 var roleValue=document.getElementById("role").value;
    var num=document.getElementById("number").value;
    var pwd=document.getElementById("pwd").value;

然后

if(checkNumber(num)&&checkPsw(pwd) &&checkRole(roleValue)) 

所以都需要修改呀,还有可能其它地方也需要修改,注意下

2013年8月15日 10:14

相关推荐

    Servlet+Jsp+Ajax分页增删改查

    使用Servlet+Jsp+JDBC实现增删改查,前台显示界面使用JavaScript、Ajax与后台交互进行登录验证,并对查询结果实现分页、局部刷新,以及复选框(全选、反选)操作,适合Web开发的初学者

    《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》源代码

    《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》光盘 完整源代码 有3个完整的jsp网站 第1章 设计Web标准网页 1.1 设个人主页 1.2 设计CSS 1.3 设计新闻查看页面 1.4 设计博客网站首页 1.5 CSS设计页面布局 ...

    10登入验证.rar(jsp+Ajax)

    (jsp+Ajax)登入验证

    html+Servlet+ajax实现登录修改

    html+Servlet+ajax实现登录和修改,避免了JSP数据验证提示的问题。

    jsp+servlet+ajax,登录验证码图片上传

    图五 说明: 在主页点击相关DVD的修改链接,可以将DVD的信息绑定在修改页面以便于用户进行修改,其中DVD编号不允许修改。图六 说明:点击添加DVD可以进行添加DVD的操作,其中编号已经自增不允许变更,可以上传DVD的...

    Java项目:网上商城系统(java+jsp+servlert+mysql+ajax)

    一、项目简述(+需求文档+PPT) 功能: 主页显示热销商品;所有商品展示,可进行商品搜索;点 击商品进入商品详情页...项目技术: JSP + C3P0+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload等等。

    基于jsp+servlet+ajax的web聊天室

    使用servlet+ajax实现无刷新发言与更新实时聊天记录以及注册时文本框失去焦点AJAX验证用户名是否已重复; 系统支持双人聊天与群聊,群聊登陆界面为webLogin.jsp 双人聊天为login.jsp。在注册以后均可以登陆系统进行...

    基于servlet+ajax用户注册登录系统.zip

    作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...

    jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路.docx

    jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路.docx

    jsp+Ajax无刷新验证码完整版

    我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session...

    Java项目:网上商城系统(java+jsp+servlet+mysql+ajax)源码+需求文档+PPT

    一、项目简述(+需求文档+PPT) 功能: 主页显示热销商品;所有商品展示,可进行商品搜索;点 击商品进入商品详情页...项目技术: JSP + C3P0+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload等等。

    Ajax+jsp注册验证用户

    代码完整,数据库要求要注意!注意细节,代码完整

    Servlet+Ajax+JSON用户账号密码登录验证Demo

    导入项目进eclipse,启动...然后访问:http://localhost:8080/yuansheng_ajax_login_demo/login.jsp 1.没有连接数据库,用户密码的数据为自定义的Map 2.使用简单的Servlet跳转 3.可按照Map中的数据 在前端 输入进行验证

    jsp+Ajax无刷新验证码

    我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session...

    基于servlet+ajax用户注册登录系统小例子

    作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...

    Ajax+Jsp+mysql+servlet实现验证注册以及省市联动

    适用于JavaWeb初学者以及对相对Ajax学习的爱好者,适用于JavaWeb初学者以及对相对Ajax学习的爱好者

    struts2 + jsp + ajax + jquery + hibernate + mysql通讯录

    都是一些基础的技术,像登录,注册验证用到了ajax和jquery结合,代码更加简单易懂。 后台用了hibernate技术,数据库用了mysql。 页面主要有登录,注册,显示联系人列表的主页面,修改,增加,删除,查找联系人等功能...

    健身俱乐部Web网站-JSP+Servlet+Hibernate+jQuery+Ajax

    这是我做的第一个Web网站,前台页面主要利用JSP、jQuery(数据验证),部分页面用到Ajax。控制转发层采用Servlet,数据访问层采用Hibernate(bean和dao是由Hibernate逆向工程自动生成)。 系统采用分层架构,由上...

    JavaMail+Ajax+Jsp实现邮箱发送验证消息并进行验证

    用javamail给邮箱推送一条验证码,并用ajax进行验证

Global site tag (gtag.js) - Google Analytics