利用ajax异步校验验证码

示例结果如图所示

具体步骤如下：

step1:

jsp页面及js脚本

  1. <%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
  2. <html>
  3. <head>
  4. <title>form</title>
  5. <script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>
  6. <script type="text/javascript">
  7. //检查用户名是否存在
  8. function check_username(){
  9. //step1,获得ajax对象
  10. var xhr = getXhr();
  11. var username = $V('userrname');
  12. //step2,使用ajax对象发请求(get/post)
  13. xhr.open('get','checkUsername?username='+username,true);
  14. //step3,编写服务器端的处理程序
  15. //step4,编写事件处理函数
  16. xhr.onreadystatechange = function(){
  17. if(xhr.readyState==4){
  18. if(xhr.status==200){
  19. //服务器访问正常
  20. var txt = xhr.responseText;
  21. $('check_msg').innerHTML = txt;
  22. }else{
  23. $('check_msg').innerHTML = '验证出错';
  24. }
  25. }
  26. };
  27. $('check_msg').innerHTML = '正在验证';
  28. xhr.send(null);
  29. }
  30. //检查验证码是否正确
  31. function check_number(){
  32. var xhr = getXhr();
  33. var code = $V('code');
  34. xhr.open('get','checkNumber?code='+code,true);
  35. xhr.onreadystatechange = function(){
  36. if(xhr.readyState==4){
  37. if(xhr.status==200){
  38. //服务器访问正常
  39. var txt = xhr.responseText;
  40. $('code_msg').innerHTML = txt;
  41. }else{
  42. $('code_msg').innerHTML = '验证出错';
  43. }
  44. }
  45. };
  46. $('code_msg').innerHTML = '正在验证';
  47. xhr.send(null);
  48. }
  49. </script>
  50. </head>
  51. <body>
  52. <form action="" method="post">
  53. <fieldset>
  54. <legend>登陆</legend>
  55. <!--  <a href="javascript:;" onclick="alert(getXhr())">测试获取ajax对象</a> -->
  56. 用户名：<input id="userrname" name="username" onblur="check_username();">
  57. <span id="check_msg" style="color:red;"></span><br/>
  58. 密码：<input name="pwd" type="password"><br/>
  59. 验证码：<img id="image" src="checkcode" onclick="this.src='checkcode?'+(new Date()).getTime()">
  60. <a href="javascript:;" onclick="$('image').src='checkcode?'+(new Date()).getTime()">换一张</a>
  61. <input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>
  62. <input type="submit" value="提交"><br/>
  63. </fieldset>
  64. </form>
  65. </body>
  66. </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代码：封装的几个常用函数

  1. //根据id获取节点
  2. function $(id){
  3. return document.getElementById(id);
  4. }
  5. //根据id获取节点的值
  6. function $V(id){
  7. return $(id).value;
  8. }
  9. //获取ajax对象
  10. function getXhr(){
  11. var xhr = null;
  12. if(window.XMLHttpRequest){
  13. xhr = new XMLHttpRequest();
  14. }else{
  15. xhr = new ActiveXObject('Microsoft.XMLHttp')
  16. }
  17. return xhr;
  18. }
//根据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异步校验验证码（转）的更多相关文章

  1. struts2中的Ajax异步校验

    登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...

  2. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  3. 问答项目---登陆账号密码登陆做AJAX异步校验

    异步验证管理员帐号方法: /* 异步验证管理员帐号 */ public function checkAccount(){ if(!IS_AJAX){echo "页面不存在";die ...

  4. Struts2学习（四）利用ajax异步上传

    上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步 ...

  5. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  6. 利用ajax异步处理POST表单中的数据

    //防止页面进行跳转 $(document).ready(function(){   $("#submit").click(function(){    var str_data= ...

  7. Ajax实现验证码异步校验

    验证码异步校验可以防止表单提交后因验证码不正确导致已填的其它项都清空. 整个过程图如下 验证码输入框出代码 <div class="form-group"> <l ...

  8. 利用onekeyup即可实现验证码的点击刷新功能

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...

  9. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

随机推荐

  1. linux-c getopt()参数处理函数

    转自:https://www.cnblogs.com/qingergege/p/5914218.html 最近在弄Linux C编程,本科的时候没好好学啊,希望学弟学妹们引以为鉴. 好了,虽然啰嗦了点 ...

  2. mysql出错的代码解析及解答

    1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导致删除数据库失败 1010:不能删除数据目 ...

  3. SQL中distinct 和 row_number() over() 的区别及用法

    1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...

  4. 廖雪峰Java10加密与安全-6数字证书-1数字证书

    数字证书: 非对称加密算法:对数据进行加密/解密 签名算法:确保数据完整性和抗否认性 摘要算法:确保证书本身没有被篡改

  5. Django项目：CMDB(服务器硬件资产自动采集系统)--07--06CMDB测试Linux系统采集硬件数据的命令02

    #settings.py """ Django settings for AutoCmdb project. Generated by 'django-admin sta ...

  6. 19-10-17-T

    真的T了.(滑稽 Final 35 Miemeng 100 03:12:51 0 03:12:54 15 03:12:55 115 03:12:55 幸好$T1$还能要,不然就…… 前言 中午$\sc ...

  7. 约束布局ConstraintLayout加快布局速度

    Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...

  8. Python实例3-字符图网格

    假定有一个列表的列表, 内层列表的每个值都是包含一个字符的字符串, 像这样: grid = [['.', '.', '.', '.', '.', '.'], ['.', 'O', 'O', '.', ...

  9. Eureka 客户端连接Eureka服务端时 报Cannot execute request on any known server 解决办法

    报Cannot execute request on any known server 这个错,总的来说就是连接Eureka服务端地址不对. 因为配置eureka.client.serviceUrl. ...

  10. webService学习五（插入片，---监控方法）

    WS Explorer工具的使用: 1- web服务浏览器 2-将对应的路径copy到这里 - 3- 4-- 5-- 6--请求的数据: 7--相应数据 二.使用TCP/IP Monitor-拦截HT ...