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

利用ajax异步校验验证码

示例结果如图所示

具体步骤如下：

step1:

jsp页面及js脚本

[html] view plain copy

print?

  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代码：封装的几个常用函数

[javascript] view plain copy

print?

  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;}

具体细节见代码

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

时间： 2024-09-30 06:37:28

利用ajax异步校验验证码（转）的相关文章

AJAX异步校验

前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){ /*取到用户名输入框*/ var nametxt = document.getElementById("username"); /*获取输入的用户名值*/ var username = nametxt.value; /*获取到装错误信息的span框*/ var sp = document.getElementById("usernameError"); v

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

异步验证管理员帐号方法: /* 异步验证管理员帐号 */ public function checkAccount(){ if(!IS_AJAX){echo "页面不存在";die();}; $where = array( //'account' => $_POST['username'] 'account' => I('post.username') ); if(M('admin')->where($where)->find()){ echo 1; }else

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

上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步上传. 此例中须要的文件能够点击这里下载:struts2异步所需文件 文件说明: ajaxfileupload.js : jquery不支持上传,所以使用这个ajax插件,和 jquery 中的ajax使用方法差点儿相同,从以下代码能够看到. json2.js : 对ajax中的回调參数进行json

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

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题. 表单文件form: <form method="post" enctype="multipart/form-data"> <div style="margin: 20px 20px 20px 10px;"

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

//防止页面进行跳转 $(document).ready(function(){ $("#submit").click(function(){ var str_data=$("#form1 input[type=text]").map(function(){ return ($(this).attr("name")+'='+$(this).val()); }).get().join("&"); var box_data

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

【项目实战】---使用ajax完毕username是否存在异步校验

小伙伴在上网的时候.须要下载或者观看某些视频资料,更或者是在逛淘宝的时候.我们都须要注冊一个用户,当我们填写好各种信息,点击确定的时候.提示username已经存在.小编就想,为什么当我们填写完username的时候,她就自己主动提示username已经存在.我们也不须要浪费那么多感情.直到填写完那么多的信息之后在提示,在小编近期的项目中,就碰到这个问题.我们能够使用ajax完毕username是否存在.今天这篇博客.小编就简单的总结一下,怎样使用ajax来完毕校验,还请小伙伴多多不吝赐教哦`(

基于AJAX用户注册信息异步校验

周末无事,自己写了一个用户注册信息的,异步校验.不多说,直接上源码: check.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+reque

使用Ajax完成用户名异步校验--【SSH】

1.事件触发--onblur <td><!-- onblur用户离开输入框的时候执行 --> <input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"> <span id="span1&quo