利用ajax异步校验验证码（转）

时间：2018-02-13 13:27:53 阅读：293 评论：0 收藏：0 [点我收藏+]

标签：mic ima tco pass title word 登陆处理程序 img

利用ajax异步校验验证码

技术分享图片

示例结果如图所示

具体步骤如下：

step1:

jsp页面及js脚本

[html] view plain copy

print?

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>form</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>
<script type="text/javascript">
//检查用户名是否存在
function check_username(){
//step1,获得ajax对象
var xhr = getXhr();
var username = $V(‘userrname‘);
//step2,使用ajax对象发请求(get/post)
xhr.open(‘get‘,‘checkUsername?username=‘+username,true);
//step3,编写服务器端的处理程序
//step4,编写事件处理函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//服务器访问正常
var txt = xhr.responseText;
$(‘check_msg‘).innerHTML = txt;
}else{
$(‘check_msg‘).innerHTML = ‘验证出错‘;
}
}
};
$(‘check_msg‘).innerHTML = ‘正在验证‘;
xhr.send(null);
}
//检查验证码是否正确
function check_number(){
var xhr = getXhr();
var code = $V(‘code‘);
xhr.open(‘get‘,‘checkNumber?code=‘+code,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//服务器访问正常
var txt = xhr.responseText;
$(‘code_msg‘).innerHTML = txt;
}else{
$(‘code_msg‘).innerHTML = ‘验证出错‘;
}
}
};
$(‘code_msg‘).innerHTML = ‘正在验证‘;
xhr.send(null);
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>登陆</legend>
用户名：<input id="userrname" name="username" onblur="check_username();">
<span id="check_msg" style="color:red;"></span><br/>
密码：<input name="pwd" type="password"><br/>
验证码：<img id="image" src="checkcode" onclick="this.src=‘checkcode?‘+(new Date()).getTime()">
<a href="javascript:;" onclick="$(‘image‘).src=‘checkcode?‘+(new Date()).getTime()">换一张</a>
<input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>
<input type="submit" value="提交"><br/>
</fieldset>
</form>
</body>
</html>

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %><html>    <head>        <title>form</title>        <script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>        <script type="text/javascript">            //检查用户名是否存在            function check_username(){                //step1,获得ajax对象                var xhr = getXhr();                var username = $V(‘userrname‘);                //step2,使用ajax对象发请求(get/post)                xhr.open(‘get‘,‘checkUsername?username=‘+username,true);                //step3,编写服务器端的处理程序                //step4,编写事件处理函数                xhr.onreadystatechange = function(){                    if(xhr.readyState==4){                        if(xhr.status==200){                            //服务器访问正常                            var txt = xhr.responseText;                            $(‘check_msg‘).innerHTML = txt;                        }else{                            $(‘check_msg‘).innerHTML = ‘验证出错‘;                        }                    }                };                $(‘check_msg‘).innerHTML = ‘正在验证‘;                xhr.send(null);            }            //检查验证码是否正确            function check_number(){                var xhr = getXhr();                var code = $V(‘code‘);                xhr.open(‘get‘,‘checkNumber?code=‘+code,true);                xhr.onreadystatechange = function(){                    if(xhr.readyState==4){                        if(xhr.status==200){                            //服务器访问正常                            var txt = xhr.responseText;                            $(‘code_msg‘).innerHTML = txt;                        }else{                            $(‘code_msg‘).innerHTML = ‘验证出错‘;                        }                    }                };                $(‘code_msg‘).innerHTML = ‘正在验证‘;                xhr.send(null);            }        </script>    </head>    <body>        <form action="" method="post">            <fieldset>                <legend>登陆</legend>                <!--  <a href="javascript:;" onclick="alert(getXhr())">测试获取ajax对象</a> -->                用户名：<input id="userrname" name="username" onblur="check_username();">                <span id="check_msg" style="color:red;"></span><br/>                密码：<input name="pwd" type="password"><br/>                验证码：<img id="image" src="checkcode" onclick="this.src=‘checkcode?‘+(new Date()).getTime()">                <a href="javascript:;" onclick="$(‘image‘).src=‘checkcode?‘+(new Date()).getTime()">换一张</a>                <input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>                <input type="submit" value="提交"><br/>            </fieldset>        </form>    </body></html>

my.js代码：封装的几个常用函数

[javascript] view plain copy

print?

//根据id获取节点
function $(id){
return document.getElementById(id);
}
//根据id获取节点的值
function $V(id){
return $(id).value;
}
//获取ajax对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘)
}
return xhr;
}

//根据id获取节点function $(id){    return document.getElementById(id);}//根据id获取节点的值function $V(id){    return $(id).value;}//获取ajax对象function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject(‘Microsoft.XMLHttp‘)    }    return xhr;}

具体细节见代码

利用ajax异步校验验证码（转）

标签：mic ima tco pass title word 登陆处理程序 img

原文地址：https://www.cnblogs.com/jpfss/p/8446358.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行