jsp+javascript制作验证码
2007-10-30 21:10
471 查看
可以在不刷新整个页面的情况下刷新验证码。
validatecode.jsp:
<%@ page contentType="image/jpeg"
import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
pageEncoding="UTF-8"%>
<!-- 定义随机生成的字符数组 -->
<%!char[] code = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };%>
<!-- 创建随机数生成器 -->
<%!Random rand = new Random();%>
<!-- 定义获取指定范围内的随机颜色 -->
<%!Color getRandColor(int fc, int bc) {
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int n = Math.abs(fc - bc);
int r = fc + rand.nextInt(n);
int g = fc + rand.nextInt(n);
int b = fc + rand.nextInt(n);
return new Color(r, g, b);
}%>
<!-- 获取随机颜色 -->
<%!Color getRandColor() {
return getRandColor(0, 255);
}%>
<%
// 设置页面,禁止图像缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
int width = 80; // 图像宽度
int height = 20; // 图像高度
int codeCount = 4; // 验证码长度
// 创建图像image
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
// 设置背景颜色
g.setColor(getRandColor(216, 250));
g.fillRect(0, 0, width, height);
// 设置字体
g.setFont(new Font("Times New Roman", Font.PLAIN, height - 2));
// 设置边框
//g.setColor(Color.BLACK);
//g.drawRect(0, 0, width - 1, height - 1);
// 随机生成160条干扰线
g.setColor(getRandColor(180, 200));
for (int i = 0; i < 160; i++) {
int x = rand.nextInt(width);
int y = rand.nextInt(height);
int xl = rand.nextInt(12);
int yl = rand.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 用一个randomCode来保存验证码
StringBuffer randomCode = new StringBuffer();
// 随机生成验证码
for (int i = 0; i < codeCount; i++) {
String randStr = String.valueOf(code[rand.nextInt(62)]);
g.setColor(getRandColor());
g.drawString(randStr, (rand.nextFloat() + 18) * i + 5, (rand
.nextFloat() + 3.5f) * 4);
randomCode.append(randStr); // 将随机产生的字符合成一个字符串
}
// 将产生的验证码保存到session中
session.setAttribute("validatecode", randomCode.toString());
// 使图像生效
g.dispose();
// 将图像输出到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
response.getOutputStream().close();
%>
usingvalidatecode.jsp
<body>
<script type="text/javascript">
function show(o){
// 重新载入验证码
var timenow = new Date().getTime();
o.src="../include/validatecode.jsp?d="+timenow;
}
</script>
验证码:<html:text property="validatecode" size="4" />
<img src="validatecode.jsp" name="rand" id="rand" />
<a href="javascript:show(document.getElementById('rand'))">看不清?</a>
</body>
结果:只要单击“看不清?”这个链接的时候就会自动刷新页面上的验证码图片而不必刷新整个页面。希望那些和我一样还属于菜鸟的人能得到帮助。
问题的提出:需求->要求单击图片或者某个链接就能实现验证码图片刷新而不需刷新整个页面。
解决过程:1.在网上找资料,在这要感谢liam168,是他那篇AJAX+jsp无刷新验证码实例 帮助我解决这个问题的。2.上论坛求助,只要你问的问题不是很幼稚,论坛上的大佬都会帮你解决的,当然不要忘记结帐。
validatecode.jsp:
<%@ page contentType="image/jpeg"
import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
pageEncoding="UTF-8"%>
<!-- 定义随机生成的字符数组 -->
<%!char[] code = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };%>
<!-- 创建随机数生成器 -->
<%!Random rand = new Random();%>
<!-- 定义获取指定范围内的随机颜色 -->
<%!Color getRandColor(int fc, int bc) {
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int n = Math.abs(fc - bc);
int r = fc + rand.nextInt(n);
int g = fc + rand.nextInt(n);
int b = fc + rand.nextInt(n);
return new Color(r, g, b);
}%>
<!-- 获取随机颜色 -->
<%!Color getRandColor() {
return getRandColor(0, 255);
}%>
<%
// 设置页面,禁止图像缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
int width = 80; // 图像宽度
int height = 20; // 图像高度
int codeCount = 4; // 验证码长度
// 创建图像image
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
// 设置背景颜色
g.setColor(getRandColor(216, 250));
g.fillRect(0, 0, width, height);
// 设置字体
g.setFont(new Font("Times New Roman", Font.PLAIN, height - 2));
// 设置边框
//g.setColor(Color.BLACK);
//g.drawRect(0, 0, width - 1, height - 1);
// 随机生成160条干扰线
g.setColor(getRandColor(180, 200));
for (int i = 0; i < 160; i++) {
int x = rand.nextInt(width);
int y = rand.nextInt(height);
int xl = rand.nextInt(12);
int yl = rand.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 用一个randomCode来保存验证码
StringBuffer randomCode = new StringBuffer();
// 随机生成验证码
for (int i = 0; i < codeCount; i++) {
String randStr = String.valueOf(code[rand.nextInt(62)]);
g.setColor(getRandColor());
g.drawString(randStr, (rand.nextFloat() + 18) * i + 5, (rand
.nextFloat() + 3.5f) * 4);
randomCode.append(randStr); // 将随机产生的字符合成一个字符串
}
// 将产生的验证码保存到session中
session.setAttribute("validatecode", randomCode.toString());
// 使图像生效
g.dispose();
// 将图像输出到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
response.getOutputStream().close();
%>
usingvalidatecode.jsp
<body>
<script type="text/javascript">
function show(o){
// 重新载入验证码
var timenow = new Date().getTime();
o.src="../include/validatecode.jsp?d="+timenow;
}
</script>
验证码:<html:text property="validatecode" size="4" />
<img src="validatecode.jsp" name="rand" id="rand" />
<a href="javascript:show(document.getElementById('rand'))">看不清?</a>
</body>
结果:只要单击“看不清?”这个链接的时候就会自动刷新页面上的验证码图片而不必刷新整个页面。希望那些和我一样还属于菜鸟的人能得到帮助。
问题的提出:需求->要求单击图片或者某个链接就能实现验证码图片刷新而不需刷新整个页面。
解决过程:1.在网上找资料,在这要感谢liam168,是他那篇AJAX+jsp无刷新验证码实例 帮助我解决这个问题的。2.上论坛求助,只要你问的问题不是很幼稚,论坛上的大佬都会帮你解决的,当然不要忘记结帐。
相关文章推荐
- PHP+javascript制作带提示的验证码源码分享
- Jsp制作验证码
- Jsp制作验证码
- JSP制作验证码
- javascript利用canvas制作验证码
- jsp制作验证码
- JSP 制作验证码的实例详解
- Jsp验证码的制作
- javascript验证码文字图片制作
- javascript制作随机验证码
- javaScript:制作随机验证码
- 简单登陆页面验证码制作和jsp中获取验证码内容
- javaScript制作验证码
- Javascript 制作图形验证码实例详解
- 利用DIV+CSS制作浮动广告,没有用到多少javascript,全是css
- JSP页面中,JavaScript可以使用EL表达式吗?
- 解决jsp中验证码不同步的问题
- 网页制作之jsp与servlet中的中文乱码解决方案
- jsp+javaScript结合dom4j动态生成网站配置文件
- 验证码 jsp生成