-
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"> <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.jsvar 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("服务器端错误"); } }
chuckLoginservletpublic 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
2个答案 按时间排序 按投票排序
-
采纳的答案
checkLogin(this.form)"/> 这里是有问题的,知道this代表什么吗?它是代表input这个对象,而this.form就是代表input里面有一个 form这个属相的值,最关键是你的type="submit" 这个就是提交,而你的表单action都是空的,所以那里都没提交上去
你这里有四个错误2013年8月14日 20:34
-
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+JDBC实现增删改查,前台显示界面使用JavaScript、Ajax与后台交互进行登录验证,并对查询结果实现分页、局部刷新,以及复选框(全选、反选)操作,适合Web开发的初学者
《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》光盘 完整源代码 有3个完整的jsp网站 第1章 设计Web标准网页 1.1 设个人主页 1.2 设计CSS 1.3 设计新闻查看页面 1.4 设计博客网站首页 1.5 CSS设计页面布局 ...
(jsp+Ajax)登入验证
html+Servlet+ajax实现登录和修改,避免了JSP数据验证提示的问题。
图五 说明: 在主页点击相关DVD的修改链接,可以将DVD的信息绑定在修改页面以便于用户进行修改,其中DVD编号不允许修改。图六 说明:点击添加DVD可以进行添加DVD的操作,其中编号已经自增不允许变更,可以上传DVD的...
一、项目简述(+需求文档+PPT) 功能: 主页显示热销商品;所有商品展示,可进行商品搜索;点 击商品进入商品详情页...项目技术: JSP + C3P0+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload等等。
使用servlet+ajax实现无刷新发言与更新实时聊天记录以及注册时文本框失去焦点AJAX验证用户名是否已重复; 系统支持双人聊天与群聊,群聊登陆界面为webLogin.jsp 双人聊天为login.jsp。在注册以后均可以登陆系统进行...
作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...
jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路.docx
我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session...
一、项目简述(+需求文档+PPT) 功能: 主页显示热销商品;所有商品展示,可进行商品搜索;点 击商品进入商品详情页...项目技术: JSP + C3P0+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload等等。
代码完整,数据库要求要注意!注意细节,代码完整
导入项目进eclipse,启动...然后访问:http://localhost:8080/yuansheng_ajax_login_demo/login.jsp 1.没有连接数据库,用户密码的数据为自定义的Map 2.使用简单的Servlet跳转 3.可按照Map中的数据 在前端 输入进行验证
我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session...
作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...
适用于JavaWeb初学者以及对相对Ajax学习的爱好者,适用于JavaWeb初学者以及对相对Ajax学习的爱好者
都是一些基础的技术,像登录,注册验证用到了ajax和jquery结合,代码更加简单易懂。 后台用了hibernate技术,数据库用了mysql。 页面主要有登录,注册,显示联系人列表的主页面,修改,增加,删除,查找联系人等功能...
这是我做的第一个Web网站,前台页面主要利用JSP、jQuery(数据验证),部分页面用到Ajax。控制转发层采用Servlet,数据访问层采用Hibernate(bean和dao是由Hibernate逆向工程自动生成)。 系统采用分层架构,由上...
用javamail给邮箱推送一条验证码,并用ajax进行验证