用java写了验证码，想在html页面点验证码的图片就实现换一张图的功能，怎么实现？

xsgydll 2011-09-06 10:11:36
我是通过一个servlet的doget方法里面生成验证码的，我不想点了图片后用window.location.reload();的方法，
<img src="a" width="145" height="20" alt="CAPTCHA" border="1" onclick= this.src="a" style="cursor: pointer;" title="看不清？点击更换另一个验证码。" />我本来是用这种方法实现的，但不是很好使，应该怎么做呢？
...全文
1347 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
pwloveqiqi 2011-11-26
  • 打赏
  • 举报
 回复
哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎哎
dragonsky_w 2011-09-08
  • 打赏
  • 举报
 回复
我以前写了一个例子，虽然用的不是servlet，但是也是纯粹的java代码，贴出来，希望对大家有用：
1、验证码图片生成文件（纯Java编写的jsp）


<%@ page contentType="text ml;charset=UTF-8" language="java"%>

<%@ page import="java.awt.*"%>

<%@ page import="java.awt.image.*"%>

<%@ page import="java.util.*"%>

<%@ page import="javax.imageio.*"%>



<%!Color getRandColor(int fc, int bc) {

		Random random = new Random();

		if (fc > 255)

			fc = 255;

		if (bc > 255)

			bc = 255;

		int r = fc + random.nextInt(bc - fc);

		int g = fc + random.nextInt(bc - fc);

		int b = fc + random.nextInt(bc - fc);

		return new Color(r, g, b);

	}%>

<%

	response.setHeader("Pragma", "No-cache");

	response.setHeader("Cache-Control", "no-cache");

	response.setDateHeader("Expires", 0);

	int width = 60;

	int height = 20;

	BufferedImage image = new BufferedImage(width, height,

			BufferedImage.TYPE_INT_RGB);

	Graphics g = image.getGraphics();

	Random random = new Random();

	g.setColor(getRandColor(200, 250));

	g.fillRect(0, 0, width, height);

	g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

	g.setColor(getRandColor(160, 200));

	for (int i = 0; i < 155; i++) {

		int x = random.nextInt(width);

		int y = random.nextInt(height);

		int x1 = random.nextInt(12);

		int y1 = random.nextInt(12);

		g.drawLine(x, y, x + x1, y + y1);

	}

	String sRand = "";

	for (int i = 0; i < 4; i++) {

		String rand = String.valueOf(random.nextInt(10));

		sRand += rand;

		g.setColor(new Color(20 + random.nextInt(110), 20 + random

				.nextInt(110), 20 + random.nextInt(110)));

		g.drawString(rand, 13 * i + 6, 16);

	}

	// 将验证码保存到session中,登录验证时再取出和用户输入的进行比较

	session.setAttribute("checkCode", sRand);

	g.dispose();

	ImageIO.write(image, "JPEG", response.getOutputStream());

	out.clear();

	out = pageContext.pushBody();

%>

2、html + js页面：


<input type="text" name="code" id="code" />

<img id="sCodeImg" border=1 src="Validate.jsp?,Math.random();" onclick="return clk_image();" alt="30" width="65" height="25" />





/**

 * 点击更换验证码

 */

function clk_image(){

	var img = document.getElementById("sCodeImg");   

	img.src = "Validate.jsp?" + Math.random();

}

teemai 2011-09-08
  • 打赏
  • 举报
 回复
你都实现了验证码显示，点个按钮js再调用下那个servlet不就ok了。思路很清晰的。

如果不想页面跳转，用ajax调那个servlet
xiaoK0629 2011-09-08
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 anybyb 的回复:]

这个 好说呢：
js代码：

function changeCode(){
document.getElementById("imgId").src="code.jsp?K="+Math.random();
//?K="+Math.random();作用去除浏览器缓存。因为浏览器会拦截相同的请求，如果我们不写 这个那么“单击这里换一张”
//和第一次的就是同一请求（同是code.js……
[/Quote]
对的,我上面的代码,在IE9中如果不用兼容模式那么点击图片就不会刷新,如果用兼容模式那么就会刷新,在chrome中可正常显示,而且IE9中竟然，如果我用兼容模式一个嵌套的form表格显示都会出现错位，而在其他浏览器中就没有问题，万恶的微软，让人无比头痛……
laolan4922 2011-09-08
  • 打赏
  • 举报
 回复
看完贴学习了
阿诺 2011-09-07
  • 打赏
  • 举报
 回复
这个 好说呢：
js代码：

function changeCode(){
document.getElementById("imgId").src="code.jsp?K="+Math.random();
//?K="+Math.random();作用去除浏览器缓存。因为浏览器会拦截相同的请求，如果我们不写 这个那么“单击这里换一张”
//和第一次的就是同一请求（同是code.jsp），浏览器可能不会提交到服务
}

<img src="code.jsp" id="imgId">

code.jsp就是你的验证码
xsgydll 2011-09-07
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 leehomwong 的回复:]

用servlet画出图片，把值放到request里么
[/Quote]
用servlet画出图片，直接写到输出流！
yxhshuaiman 2011-09-07
  • 打赏
  • 举报
 回复
如果知道ajax怎么做的话 应该你一下就知道怎么做了，点图片的时候ajax调用一下你生成图片的方法就行了
yangke200812010226 2011-09-07
  • 打赏
  • 举报
 回复
加个刷新功能 通过时间来进行验证码的改变
bijanen19861113 2011-09-07
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 ace62 的回复:]

通过AJAX局部刷新就可以
[/Quote]

对头，就是通过AJAX异步取得新的图片验证码，然后再重新显示出来就OK了..
xiaoK0629 2011-09-07
  • 打赏
  • 举报
 回复
我在项目中是这样用的:
jsp文件中:
……
<script type="text/javascript" src="js/loginimage.js">
</script>
……
<td>
<span id="imagecode" onclick="getImg();" style="cursor: pointer;">
<img style="width: 58px; height: 19px; margin-left: 1px;" src="image.jsp">
</span>
</td>
……
loginimage.js文件
var xmlhttp;
//创建XMLHttpRequest对象
function GetXmlHttp() {
//判断window中有没有XMLHttpRequest对象如果有，则表示不是IE
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
//判断window中有没有ActiveXObject对象如果有则是IE
if (window.ActiveXObject) {
//IE两种创建XMLHttpReq对象，一般都支持第一种
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {

}
}
}
}
}
//主调函数,以当前页作为参数
function getImg() {
xmlhttp = GetXmlHttp();
xmlhttp.open('POST', "image.jsp", true);
xmlhttp.onreadystatechange = imagecodecallback;
xmlhttp.send(null);
}

//回调函数
function imagecodecallback() {
if (xmlhttp.readyState != 4) {
document.getElementById("imagecode").innerHTML = "Loading...";
} else {
if (xmlhttp.status == 200) {
//控制产生图片的大小样式等等，要进行必要的修改
document.getElementById("imagecode").innerHTML = "<img style='width:58px; height:19px; margin-left:1px;' src='image.jsp' />";
}
}
}
image.jsp文件:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ page contentType="image/jpeg"
import="java.awt.*,java.awt.image.*,javax.imageio.*"%>
<%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜色
Random random = new Random();
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}%>
<%
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);

// 在内存中创建图象
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
Graphics g = image.getGraphics();

//生成随机类
Random random = new Random();

// 设定背景色
g.setColor(getRandColor(100, 250));
g.fillRect(0, 0, width, height);

//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);

// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(100, 200));
for (int i = 0; i < 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}

// 取随机产生的认证码(4位数字)
//String rand = request.getParameter("rand");
//rand = rand.substring(0,rand.indexOf("."));
String sRand = "";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(random.nextInt(10));
sRand += rand;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand, 13 * i + 6, 16);
}

// 将认证码存入SESSION
session.setAttribute("rand", sRand);

// 图象生效
g.dispose();

// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>
希望对你有用……
24K純帥 2011-09-07
  • 打赏
  • 举报
 回复
用servlet画出图片，把值放到request里么
ace62 2011-09-07
  • 打赏
  • 举报
 回复
通过AJAX局部刷新就可以
随风醉舞 2011-09-07
  • 打赏
  • 举报
 回复
要不做局部刷新，要不用ajax
qinchun36 2011-09-07
  • 打赏
  • 举报
 回复
在请求地址最后加一个没用的随机请求参数，不然浏览器会认为是同一个文件而直接取缓存图片，导致不会刷新。
xsgydll 2011-09-06
  • 打赏
  • 举报
 回复
补充，"a"是生成验证码的servlet的地址
Java分布式中间件大汇聚实战第一季 (SpringBoot2.0+应用案例+点赞系统+面试突击)
概要介绍： 本门课程属于“Java分布式中间件大汇聚实战”系列课程，主要介绍了企业级项目中真实的应用场景的实现及主流的Java核心技术栈（Redis、RabbitMQ、Spring AOP、Redisson、ZooKeeper…）的实战等等。...
Java实现登录验证码的功能
Java实现登录验证码的功能
Java实现图形验证码
本文生成图像验证码使用了Hutool官网 — A set of tools that keep Java sweet.图形验证码是一种用于验证用户身份的安全措施。它通过生成一张包含随机图像和文字的图片，要求用户进行识别并输入正确信息来证明其为...
【java图片验证码】Java 服务端生成图片验证码及验证
Java 服务端生成图片验证码及验证 简介 验证码是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方 式进行不断的登录、灌水。因为验证码是一个混合了数字或符号的图片，人眼看起来都费劲， ...
Java怎样实现验证码？
我们总是在登录微信，QQ或者其他一些网页的时候，都会出现一个验证码框，他们有的是数字的，有的是文字的，有的是混合的，各种各样的。 很好奇是怎么实现的。带着这样的疑问。 1.随机数字字母组合的验证码 首先...
Web 开发

81,095

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章