验证码无刷新验证（AJAX技术）

最新推荐文章于 2021-10-20 22:21:34 发布

糖小豆子

最新推荐文章于 2021-10-20 22:21:34 发布

阅读量3k

点赞数 3

分类专栏： Java

本文链接：https://blog.csdn.net/Sugar_girl/article/details/54581771

版权

Java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

看了两天也没明白为何这代码不能实现“接连3次输入错误，更新验证码，重新输入”的功能，阿西吧等我再研究一哈回来更改。

需要生成验证码图片模板的小伙伴们看过来~（微笑脸）

运行效果示意：

主页面 img.jsp

<%@ page language="java" contentType="text/html; charset=GBK" import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<html>
<head>
<title>图片验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src = "net.js"></script>
</head>
<body>
AJAX(无刷新及时提示)验证码实例 code by TX
<hr>
 
<%
String num = request.getParameter("num");
String random = (String)session.getAttribute("random");
String name = request.getParameter("name");
if(num != null && random != null && name != null)
{
	if(num.equals(random))
	{
		out.println("<font style=\"color:green;font-weight:bold\">恭喜您，验证码输入成功，这里是提交结果页面，可以写入数据库了！</font><a href=\"img.jsp\">返回再测试</a><br>");
		out.println("您的名字是：" + name);
		out.println("<br>");
		out.println("您输入的是：" + num);
		out.println("验证码是：" + random);
		out.println("</body>");
		return;
	}
}
%>
<script type="text/javascript">
var times = 0;
function subform()
{
	var gtext = this.req.responseText;
	//out.println(gtext);
	var info = document.getElementById("info");
	//info.innerHTML = "111";
	if(gText.indexOf("validate_successful") != -1)
	{
		//info.innerHTML = "<font color = green>验证码通过</font>";
		document.forms["myform"].submit();
	}
	else
	{
		times++;
		if(times >= 3)
		{
			info.innerHTML = "接连3次输入错误。更新验证码，请重新输入";
			document.forms["myform"].num.value = "";
			show(document.getElementById('random'));
			times = 0;
		}
		else
		{
			info.innerHTML = "第"+ times + "次验证码错误，请注意区分大小写";
		}
		document.forms["myform"].num.select();
	}
}
function validata(obj)
{
	var enter = true;
	var info = document.getElementById("info");
	var msg = "";
	if(obj.name.value.match(/^\s*$/g)) //匹配0个或多个空白符,空白符包括空格、换行、制表等符号。
	{
		msg += "请输入您的姓名<br>";
		enter = false;
	}
	if(obj.num.value.match(/^\s*$/g))
	{
		msg += "请输入验证码<br>";
		enter = false;
	}
	if(enter == false)
	{
		info.innerHTML = msg;
		return false;
	}
	
	var url = "num.jsp?num=" + obj.num.value;
	var newxmlhttp = new net.ContentLoader(url, subform, "", "get", null, null);
	return false;
} 
function show(o) //重载验证码
{
	var timenow = new Date().getTime();
	o.src = "random.jsp?d=" + timenow;
}
</script>
<form action = "img.jsp" name = "myform" method = "post" onsubmit = "return validata(this);">
<table>
<tr><th>您的姓名：</th><th><input type = "text" name = "name" size = 10></th></tr>
<tr><th>验证码：</th><th><input type = "text" name = "num" size = 10 maxlength = "4"></th>
<th><img src = "random.jsp" id = "random" align = "" valign = "absmiddle" hspace = "5"></th>
<th><a href = "javascript:show(document.getElementById('random'))">验证码看不清</a></th></tr>
<tr><th><input type = "submit" value = "提交"></th></tr>
</table>
<div id=info style="color:red;padding:10px;font-size:12px;"></div>
</form>
</body>
</html>

反馈xmlhttp请求的页面 num.jsp

<%@ page language="java" contentType="text/html; charset=GBK" import="java.sql.*" errorPage = "" pageEncoding="GBK"%>
<%
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<%
String num = request.getParameter("num");
String random = (String)session.getAttribute("random");
//out.print("num:" +num);
//out.print("random:" +random);
if(num!=null && random != null)
{
	if(!num.equals(random))
	{
		/*
		out.println("<script>alert('验证码错误！请重试。')</script>");
		out.println("<script>history.go(-1)</script>");
		//response.sendRedirect("img.jsp");
		*/
		out.print("validate_failed:" + random);
	}
	else
	{
		//out.println("<center>验证成功！</center>");
		out.print("validate_successful:" + random);
	}
}
%>

生成验证码图片的页面 random.jsp

<%@ page autoFlush = "false" import = "java.util.*,java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*"%>
<%request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset = GBK");
%>
<%
String chose = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ";
char display[]={'0', ' ', '0', ' ', '0', ' ', '0'},
ran[] = {'0', '0', '0', '0'}, temp;
Random rand = new Random();
for(int i = 0; i < 4; i++)
{
	temp = chose.charAt(rand.nextInt(chose.length()));
	display[i*2] = temp;
	ran[i] = temp;
}
String random = String.valueOf(display);
session.setAttribute("random", String.valueOf(ran));
%>
<%
out.clear();
response.setContentType("image/jpeg");
response.addHeader("pragma", "NO-cache");
response.addHeader("Cache-Control", "no-cache");
response.addDateHeader("Expries", 0);
int width = 80, height = 30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
g.setColor(Color.GREEN);
g.fillRect(0, 0, width, height);

g.setColor(Color.RED);
Font font = new Font("Arial", Font.PLAIN, 20);
g.setFont(font);

g.drawString(random, 5, 20);
g.dispose();
ServletOutputStream outStream = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outStream);
encoder.encode(image);
outStream.close();
%>

封装xmlhttp对象，封装的目的是可以很方便地调用，例如封装为 net.js。

/* namespacing object*/
var net = new Object();

net.READY_STATE_UNINITIALIZED = 0;
net.READY_STATE_LOADING = 1;
net.READY_STATE_LOADED = 2;
net.READY_STATE_INTERACTICE = 3;
net.READY_STATE_COMPLETE = 4;

net.ContentLoader = 
	function(url, on_load, on_error, method, params, contentType){
		this.req = null;
		this.on_load = on_load;
		this.on_error = (on_error) ? on_error : this.defaultError;
		this.loadXMLDoc(url, method, params, contentType);
}

net.ContentLoader.prototype.loadXMLDoc =
	function(url, method, params, contentType){
	if(!method)
	{
		method = "GET";
	}
	if(!contentType && method == "POST")
	{
		contentType = 'application/x-www-form-urlencoded';
	}
	if(window.XMLHttpRequest)
	{
		this.req = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		try{
			this.req = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(el){
			try{
				this.req = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e2){}
		}
	}
	if(this.req)
	{
		try
		{
			var loader = this;
			this.req.onreadystatechange = function()
			{
				net.ContentLoader.onReadyState.call(loader);
			}
			this.req.open(method, url, true);
			if(contentType)
			{
				this.req.setRequestHeader('Content-Type', contentType);
			}
			this.req.send(params);
		}
		catch(err)
		{
		this.on_error.call(this);
		}
	}
}
net.ContentLoader.onReadyState = function()
{
	var req = this.req;
	var ready = req.readyState;
	if(ready == net.READY_STATE_COMPLETE)
	{
		var httpStatus = req.status;
		if(httpStatus == 200 || httpStatus == 0)
		{
			this.on_load.call(this);
		}
		else
		{
			this.on_error.call(this);
		}
	}
}
net.ContentLoader.prototype.defaultError = function()
{
	alert("error fetching data!" + "\n\nreadyState:"
			+this.req.readyState + "\nstatus: " + this.req.status
			+ "\nheaders: " + this.req.getAllReaponseHeaders());
}