AJAX判断用户名是否已存在以及密码是否大于6位等问题

最新推荐文章于 2021-08-06 14:46:42 发布

无限进步

最新推荐文章于 2021-08-06 14:46:42 发布

阅读量1.1k

点赞数

分类专栏：随便写着玩

本文链接：https://blog.csdn.net/tian895623/article/details/78869429

版权

随便写着玩专栏收录该内容

59 篇文章 3 订阅

订阅专栏

首先在JSP页面写上function方法。

<script>
function getajaxHttp() {

    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari  
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer  
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
    return xmlHttp;
}
/** 
 * 发送ajax请求 
 * url--请求到服务器的URL 
 * methodtype(post/get) 
 * con (true(异步)|false(同步)) 
 * functionName(回调方法名，不需要引号,这里只有成功的时候才调用) 
 * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象) 
 */
function ajaxrequest(url, methodtype, con, functionName) {
    //获取XMLHTTPRequest对象
    var xmlhttp = getajaxHttp();
    //设置回调函数（响应的时候调用的函数）
    xmlhttp.onreadystatechange = function() {
        //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？
        //当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                functionName(xmlhttp.responseText);
            }
        }
    };
    //创建请求
    xmlhttp.open(methodtype, url, con);
    //发送请求
    xmlhttp.send();
}
**function checkUsername() {

    var username=document.getElementById('name').value;
    //调用ajax请求Servlet
    ajaxrequest("checkUser.do?name="+username,"POST",true,ckUsernameResponse);
}**
function ckUsernameResponse(responseContents){

    if (responseContents == 'yes') {
        document.getElementById('span_1').innerHTML="<font color='red'>用户名存在</font>";
        document.getElementById('name').style="background-color: red";
    }else{
        document.getElementById('span_1').innerHTML="";
        document.getElementById('name').style="background-color: white";
    }
}

function checkLength(){//判断输入密码是否大于6位

    var password=document.getElementById("pwd1"); //获取密码框值

 if(password.value.length<6){
     document.getElementById('span_2').innerHTML="<font color='red'>密码少于六位</font>";
     document.getElementById('pwd1').style="background-color: red";
 }else{
     document.getElementById('span_2').innerHTML="";
     document.getElementById('pwd1').style="background-color: white";
 }

 }

function re(){ 
    var password = document.getElementById("pwd1").value; 
    var repsword = document.getElementById("pwd2").value; 
    if(password != repsword) {
        document.getElementById('span_3').innerHTML="<font color='red'>两次输入密码不一致</font>";
        document.getElementById('pwd2').style="background-color: red";
     }else{
         document.getElementById('span_3').innerHTML="";
         document.getElementById('pwd2').style="background-color: white";
     }
    }
</script>

<body>
<div class="login">
    <h2>Acced Form</h2>
    <div class="login-top">
        <h1>用户注册</h1>
        <form modelAttribute="user" action="userRegist.do" method="post" id="form" enctype="multipart/form-data">
            您的账号:<input type="text" name="name" id="name" onblur="checkUsername()" value="${user.name}"/><span id="span_1"></span></br>
            您的密码:<input type="password" name="password" id="pwd1" onblur="checkLength()" value="${user.password}"/><span id="span_2"></span></br>
            确认密码:<input type="password" name="rePassword" id="pwd2" onblur="re()"/><span id="span_3"></span></br>
            您的邮箱:<input type="text" name="email"value="${user.email}"/>
            您的头像:<input type="file" name="files"/>
            <input type="submit" value="注册" id="submit">
        </form>
    </div>

</div>  


</body>

其中的关键就是把input里的id属性名称，传入到function中，执行函数，其中funciton checkUsername是调用servlet连接数据库操作。

然后是servlet代码。

@RequestMapping("/checkUser")
@ResponseBody //这个注解是为了return "yes" 返回具体的string  不然的话系统胡执行寻找yes.jsp对象
public String checkUser(String name)
{

    boolean flag = userService.selectUserName(name);
    if(flag) {
        return "yes";


    }else {
        return "no";
    }


}

userService.selectUserName(name);
@Override
    public boolean selectUserName(String userName) {
        // TODO Auto-generated method stub
        Session session = hibernateUtil.openSession();
        Transaction tran = session.beginTransaction();

        Query query = session.createQuery("from User where name=?");
        query.setParameter(0, userName);
        User user = (User) query.uniqueResult();//返回一个唯一结果
        if(user != null) {
            return true;
        }
        return false;
    }