如何实现登陆界面验证码的刷新功能？
-
在通过Maven配置好web服务后，在webapp文件夹中我们建立一个login.jsp文件
-
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 -
<body>元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） -
建立完以后我们将之前写的代码（一）中的LoginController类复制过来，修改一下
-
需要注意的是我们可以在
<body></body>中间插入脚本片段，这边有两种格式
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>简单登陆页面</title>
</head>
<body>
<%
//内置对象request，response，pageContext,session,application,config,out,page,用于异常的，共九个
String loginName = request.getParameter("loginName");
String loginPwd = request.getParameter("loginPwd");
String validCode = request.getParameter("validCode");
String saveCode = (String) request.getSession().getAttribute("code");//用强转不用tostring，否则会空指针异常
//response.getWriter().println("欢迎登陆");
String msg = null;
if (StrUtil.isBank(loginName) && StrUtil.isBank(loginPwd)) {
msg = "<font size = '20'>请输入账号密码！</font>";
} else {
if (StrUtil.isBank(validCode)) {
msg = "<font size = '20'>请输入验证码！</font>";
} else {
if (validCode.equalsIgnoreCase(saveCode)) {//比较验证码，不区分大小写
//登陆名称是你的学号，密码是1234，那么显示下面的内容，否则，显示用户账户或密码错误
if ("5197101250".equals(loginName) && "1234".equals(loginPwd)) {
msg = "<font size = '20'>欢迎" + loginName + "登陆</font>";
} else {
msg = "<font size = '20'>账号或密码错误！</font>";
}
} else {
msg = "<font size = '20'>验证码错误！</font>";
}
}
}
%>
<form action="" name="login" method="post">
登陆名称：<input type="text" name="loginName"><br>
登陆密码：<input type="password" name="loginPwd"><br>
验证码值：<input type="text" name="validCode" size="4">
<img src="CaptcheController.jsp" ><br>
<input type="submit" value="登陆">
<input type="reset" value="取消"><br>
</form>
</body>
</html>
- 我们将CaptcheController类代码复制到里面
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %><%--
Created by IntelliJ IDEA.
User: qsX
Date: 2020/4/13
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="image/jpeg;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码图片</title>
</head>
<body>
<%!
/**
* @Description 生成随机干扰
* @Param [count, g]
* @Return void
*/
//随机干扰点
public void randomDrop(int count, Graphics2D g) {
for (int i = 0; i < count; i++) {
Random rd = new Random();
int x = rd.nextInt(130);//产生小于WIDTH的随机整数
int y = rd.nextInt(60);//产生小于HEIGHT的随机整数
g.setColor(getColor(0));//随机颜色
g.drawLine(x, y, x, y + 2);//绘制超短的线，看着是个点
}
}
//随机干扰线
public void randomLine(int count, Graphics2D g) {
for (int i = 0; i < count; i++) {
Random rd = new Random();
int xBegin = rd.nextInt(130);//产生小于WIDTH的随机整数，起始位置
int yBegin = rd.nextInt(60);//产生小于HEIGHT的随机整数
int xEnd = rd.nextInt(xBegin + 50);//终点
int yEnd = rd.nextInt(yBegin + 30);
g.setColor(getColor(0));//随机颜色
g.drawLine(xBegin, yBegin, xEnd, yEnd);//绘制线条
}
}
/**
* @Description 生成随机验证码
* @Param 需要几位验证码
* @Return 随机生成的验证码
*/
//随机验证码
public String randomString(int count) {
StringBuilder builder = new StringBuilder();
String source = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789";
Random rnd = new Random();
for (int i = 0; i < count; i++) {
int pos = rnd.nextInt(source.length());
String s = source.substring(pos, pos + 1);
builder.append(s);//每位验证码之间加个空格
}
return builder.toString();
}
/**
* @Description 生成随机颜色值
* @Param a越大颜色越深
* @Return 随机的RGB颜色
*/
public Color getColor(int a) {
Random rd = new Random(); //Math.random()为生成0-1随机数
int r = rd.nextInt(256 - a);//rd.nextInt(256)为随机生成0-255随机数
int g = rd.nextInt(256 - a);
int b = rd.nextInt(256 - a);
return new Color(r, g, b);
}
%>
<%
final int WIDTH = 130;
final int HEIGHT = 60;
//禁止缓存，防止验证码过期
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setHeader("Expires", "0");//过期时间设置为0，就是立马过期的意思
//申请内存空间
BufferedImage img = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
//画笔
Graphics gg = img.getGraphics();
Graphics2D g = (Graphics2D) gg;//为了旋转功能
//设置背景颜色
g.setColor(Color.white);
//g.fillRect(0,0,100,60);
//设置背景大小
g.fillRect(0, 0, WIDTH, HEIGHT);
//设置背景大小
g.fillRect(0, 0, WIDTH, HEIGHT);
//设置干扰线
randomLine(80, g);
//设置干扰点
randomDrop(100, g);
//设置验证码
Random rd = new Random();
//储存验证码值
StringBuilder b = new StringBuilder();
//循环四次，四位
for (int i = 0; i < 4; i++) {
//字体固定，大小随机
g.setFont(new Font("name", Font.BOLD, rd.nextInt(20) + 25));
//设置验证码颜色，稍微深一点
g.setColor(getColor(50));
//调用randomString方法设置验证码个数
String code = randomString(1);
//设置每个验证码的坐标
int x = 30 * i;
int y = rd.nextInt(10) + 35;
//设置随机旋转角度
int revolve = rd.nextInt(10);
//设置随机顺时针或逆时针旋转
if (rd.nextBoolean()) revolve = -revolve;
//旋转,Math.toRadians角度转弧度
g.rotate(Math.toRadians(revolve), 5 + x, HEIGHT / 3);
//g.rotate(Math.toRadians(-revolve),65 , 30);
//设置验证码位置，x大往右，y大往下
g.drawString(code, 5 + x, y);
//将每一位验证码存入b
b.append(code);
}
//创建session对象，将验证码code 保存在session中
//session = request.getSession();
session.setAttribute("code", b.toString());
// 释放资源
g.dispose();
// 图片输出 ImageIO
ServletOutputStream outputStream = response.getOutputStream();
ImageIO.write(img, "JPEG", response.getOutputStream());
try {
outputStream.flush();
} catch (Exception ex) {
} finally {
outputStream.close();
}
%>
</body>
</html>
- 再次运行看一下效果
- 接下来我们来看下如何实现点击验证码让其刷新的效果，试一下超链接把
- 但是我们这里需要注意，这边的超链接就不能使用src地址了，如果是这样就变成整个页面跳到验证码的页面了
- 所以我们这边加一个javascript:reloadCheckImg()，执行一段javascript语句，从而防止链接跳转。
- 还需要给他加一个id，会有大用处，下面会提到
<a href="javascript:reloadCheckImg();"><img src="CaptcheController.jsp" id="codeImg"></a><br>
- 然后我们需要在
<head>中载入jquery， - 附带jquery-3.3.1.js下载地址：http://www.jq22/jquery-info122
- 下载完后复制到webapp中
- 接下来我们建立一个reloadCheckImg()功能，并调用attr() 方法来设置或返回被选元素的属性和值。
- 完成后的代码为：
<%--
Created by IntelliJ IDEA.
User: qsX
Date: 2020/4/14
Time: 21:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>简单登陆页面</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function reloadCheckImg() {
$("#codeImg").attr("src", "CaptcheController.jsp?t=" + new Date().getTime())
}
</script>
</head>
<body>
<form action="" name="login" method="post">
登陆名称：<input type="text" name="loginName"><br>
登陆密码：<input type="password" name="loginPwd"><br>
验证码值：<input type="text" name="validCode" size="4">
<a href="javascript:reloadCheckImg();"><img src="CaptcheController.jsp" id="codeImg"></a><br>
<input type="submit" value="登陆">
<input type="reset" value="取消"><br>
</form>
</body>
</html>
- 这边（1） 中就是要修改图片的id。如果不加id写img的话就是所有的图片都被修改了，还有就是id前要加#，要加#，要加#，重要的事说三遍。
- （2）中即为修改后的值。由于每次的点击时间不同，即每次发出的请求参数不同，所以会区别为不同的请求。不加的话点击没有效果
- 现在点击图片刷新的效果就完成了
更多推荐
jsp简单登陆界面加图形验证码,新手必备（二）验证码刷新
发布评论