日期:2014-05-16  浏览次数:20570 次

ajax 验证用户与密码

登陆页面:

<s:form method="post" action="../user/login.action" id="ctl00" theme="simple" namespace="/authorize"> 
                   <s:token></s:token> 
                            <tr> 
                                <td> 
                                    <span>请输入Email地址:</span> 
                                    <div> 
                                        <s:textfield name="email" id="txtUsername" cssClass="textbox" ></s:textfield><br/> 
                                        <span id="emailInfo" style="color:red"></span> 
                                    </div> 
                                </td> 
                                <td> 
                                    <span class="blank">密码:</span> 
                                    <div> 
                                        <s:password name="password" id="txtPassowrd" cssClass="textbox" ></s:password><br/> 
                                        <span id="pwdInfo" style="color:red"></span> 
                                    </div> 
                                </td> 
                                  
                                <td> 
                                    <s:submit id="btnSignCheck" cssClass="button_enter"  value="登 录"></s:submit> 
 
                                </td> 
                            </tr> 
                            <!--   
                            <input type="hidden" name="uri" value="${uri}" />  
                             --> 
                        </s:form> 
?

var flag = {"login":false};  
$(function(){  
    var name="";  
    var pwd="";  
    $("#txtUsername").blur(function(){  
        flag.login=false;  
        name = $("#txtUsername").val();  
        if(name==""){  
            $("#emailInfo").html("请输入邮箱地址!");  
        }else{  
            $("#txtPassowrd").blur(function(){  
                pwd=$("#txtPassowrd").val();  
                if(pwd==""){  
                    $("#pwdInfo").html("请输入密码!");  
                }else{  
                    $.post(  
                "../user/testLogin.action?dt="+new Date().getTime(),  
                {"loginName":name,"loginPwd":pwd},  
                function(data){  
                  
                    if(data.ok){  
                        flag.login=true;  
                    }else{  
                    alert(data);  
                        $("#pwdInfo").html("用户名或密码错误,请重新填写!");  
                    }  
                },  
                "json"  
            );  
                }  
            });  
        }  
    });  
    //是否允许表单提交  
    $("#ctl00").submit(function(){  
        return flag.login;  
    });  
}); 

?上面代码中ajax是使用jquery提供的$.post来发送的

$.post(  
                    "../user/testLogin.action?dt="+new Date().getTime(),  
                    {"loginName":name,"loginPwd":pwd},  
                    function(data){  
                      
                        if(data.ok){  
                            flag.login=true;  
                        }else{  
                        alert(data);  
                            $("#pwdInfo").html("用户名或密码错误,请重新填写!");  
                        }  
                    },  
                    "json"  
                ); 

?后台判断逻辑

public class testLoginAction {  
    private boolean ok;  
      
 
    public boolean isOk() {  
        return ok;  
    }  
 
 
    public void setOk(boolean ok) {  
        this.ok = ok;  
    }  
 
 
    public String e