ajax+springmvc+jquery用户登录验证

html

 <form action="/SSM0626/user/register.action" id="myform" method="post">
    <div class="form-group">
    <label>用户名:label>
    <input type="text" name="userName" id="username" class="form-control">
    <span id="span1">span>
    div>
    <div class="form-group">
    <label>密码:label>
        <input type="password" name="userPassWord" id="password" class="form-control">
        <span id="span2">span>
    div>
    <div class="form-group">
    <label>权限:label>
        <label class="radio-inline"><input type="radio" name="userPower" value="管理员">管理员label>
        <label class="radio-inline"><input type="radio" name="userPower" value="普通用户">普通用户label>
        <label class="radio-inline"><input type="radio" name="userPower" value="前台">前台label>

    div>
    
    <input type="submit" value="注册" class="btn btn-default" >
form>

js代码-用于字符验证

 $(function(){
                //失去焦点blur
                var username_result = false;
                var userpwd_result=false;
                $("#username").blur(function(){
                    if($("#username").val() == ""){
                        $("#span1").html("username not null!!");
                        username_result = false;
                    }
                    else if(/^\w{6,30}$/.test($("#username").val()) ==false){
                        $("#span1").html("username 格式错误!!");
                        username_result = false;
                    }
                    else{
                        $("#span1").html("");
                        username_result = true;
                    }
                });
                $("#password").blur(function(){
                    if($("#password").val() == ""){
                        $("#span2").html("password not null!!");
                        userpwd_result = false;
                    }
                    else if(/^\w{6,30}$/.test($("#password").val()) ==false){
                        $("#span1").html("password 格式错误!!");
                        userpwd_result = false;
                    }
                    else{
                        $("#span1").html("");
                        userpwd_result = true;
                    }
                });
                //表单提交的时候
                $("#myform").submit(function(){
                    if(username_result == true){
                        return true;
                    }
                    else{
                        return false;
                    }
                });
            });
        script>

ajax

$(function(){

            $("#username").blur(function(){
                var username_val=$("#username").val();
                $.ajax({
                    async:true,
                    data:{"username":username_val},
                    dataType:"text",
                    url:"/SSM0626/user/checkName.action",
                    error:function(xhr,status){
                        console.log(status);
                    },
                    success:function(data){
                        $("#span1").html(data);
                    }
                });
            });
        });

controller层

    //参数和data的key相同
    @RequestMapping("checkName.action")
    @ResponseBody
    //该方法的返回值是给ajax用的
    public String checkName(String username){
        boolean result=us.checkName(username);
        if(result==true){
            return "failure";
        }else{
            return "success";
        }
    }

你可能感兴趣的:(ajax)