muyexia521
2013-08-14 20:09 阅读 779

JSp+ajax用户登录验证

[img]http://dl2.iteye.com/upload/attachment/0088/2001/4ee085e5-47e0-3995-ad42-62e4a53cfc2f.png[/img]
用户登陆界面,想要实现输入账号之后离开输入框就验证该账号是否存在,输入角色、账号、密码之后,点击登录,如果正确就跳转到index.jsp,错误不跳转并且在密码输入框下显示提示信息;有一个没输入就提示,信息也是在密码输入框下。

我现在的问题是:若果什么也不输,点击登录,会闪一下,但闪过之后就是重置了页面。输入正确也是闪一下就重置页面.账号验证没问题,就是登录有问题,但是搞不定,大侠们看看吧!
login.jsp
[code="java"]


                <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>[/code]

login.js
[code="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("服务器端错误");
    }
}[/code]

chuckLoginservlet
[code="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();
}[/code]
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    jinandmei jinbingchuan 2013-08-14 20:34

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

    点赞 6 评论 复制链接分享
  • jinandmei jinbingchuan 2013-08-15 10:14

    [code="java"] 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))

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

    点赞 评论 复制链接分享

相关推荐