ajax实现动态验证码验证（前端jsp页面）

最新推荐文章于 2024-08-19 09:29:46 发布

许中宝

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量5.6k

点赞数 3

分类专栏： AJAX JavaEE 文章标签： ajax 验证码 jsp 前端

本文链接：https://blog.csdn.net/qq_18675693/article/details/50333715

版权

JavaEE 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

效果图
这里写图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>AJAX实现验证码交互</title>  
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <style type="text/css">
        body{
        width: 100%;
        height:98%
        }
        div{
            position:relative;
            left:50% ;top:10%;
            margin-left:-200px;
            width:400px;
        }
        .codeInput{
        height:25px;
        }
        .codeImage{
            height:25px;
            position: relative;
            top: 5px;
            left:2px;
        }
        #resultTipID{
            display:none;
            position: relative;
            top: 3px;
            left:5px;
            width:15px;
            height:15px;
        }
    </style>
    <script type="text/javascript">
    function createAjax(){
        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    function trim(str){
        //首先判断类型，是String类型才可以操作否则直接返回
        var type= typeof(str);
        if(type=='string'){
            str=str.replace(/^\s+/,"");//替换字符串开头的所有" "-->""
            str=str.replace(/\s+$/,"");//替换字符串结尾的所有" "-->""
        }
        return str;
    }
    </script>

  </head>

  <body>

    <div id="codeForm" align="center">
        验证码：<input type="text" id="codeID" maxlength="4" size="4px" class="codeInput">
        <img id="codeImageID" alt="刷新" src="generateCode.jsp" class="codeImage" >
        <img id="resultTipID" src="#" />
    </div>

  </body>

    <script type="text/javascript">
        document.getElementById("codeImageID").onclick=function(){
            //当单击验证码图片,只需要改变一个img标签的src，完成验证码的刷新
            var url="${pageContext.request.contextPath}/generateCode.jsp?time="+new Date().getTime();
            var imageElement=document.getElementById("codeImageID");
            this.src=url;
        }
        document.getElementById("codeID").onkeyup=function(){
            var value=this.value;
            value=trim(value.toUpperCase());
            this.value=value;
            var tipElement=document.getElementById("resultTipID");
            if(value.length==4){
                //创建ajax对象
                var ajax=createAjax();
                //设置method和url
                var method="POST";
                var url="${pageContext.request.contextPath}//verificateCodeServlet";
                //准备ajax
                ajax.open(method,url);
                //设置post传递请求头，固定写法
                ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //发送
                var content="verificationCode="+value;
                ajax.send(content);
                //------------等待服务器端响应处理-----------------
                ajax.onreadystatechange=function(){
                    if (ajax.readyState==4 && ajax.status==200){
                        var url= ajax.responseText;
                        //设置tip属性
                        tipElement.src=url;
                        //修改css，显示tip
                        tipElement.style.display='inline';

                    }
                }               
            }else{
                tipElement.style.display='none';
            }
        }

    </script>
</html>