1. JS点击切换验证码
需求 ： 用户注册时，通用会有验证码。目的就是-防止用户使用程序恶意注册。
那么我们如何点击验证码图片时，切换验证码的内容呢？
1.1 制作验证码图片
验证码图片生成的原理说明：
用户在注册时，注册页面加载时，需要加载一个图片信息，此时页面的图片以及图片的验证码信息是由后台Servlet生成的。 这样才可以保证验证码是可以动态生成的，也就是刷新一次，Servlet被访问一次，那么图片就会动态生成一次。
通过页面标签<img src='servlet地址'> 我们可以向服务器Servlet发送请求，由Servlet对象通过HttpServletResponse输出流的形式将验证码图片回应给<img>标签。
1. Servlet生成验证码代码：
Servlet制作验证码图片代码，因此处需要设计到gui相关代码，因此只需要了解下述代码即可，不需要掌握编写。
public classCheckcodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
// gui 生成图片
// 1 高和宽
int height = 30;
int width = 60;
String data ="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
Random random = new Random();
// 2 创建一个图片
BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
// 3 获得画板
Graphics g = image.getGraphics();
// 4 填充一个矩形
// * 设置颜色
g.setColor(Color.BLACK);
g.fillRect(0, 0, width, height);
g.setColor(Color.WHITE);
g.fillRect(1, 1, width - 2, height - 2);
// * 设置字体
g.setFont(new Font("宋体", Font.BOLD | Font.ITALIC, 25));
// 5 写随机字
for (int i = 0; i < 4; i++) {
// 设置颜色--随机数
g.setColor(new Color(random.nextInt(255),random.nextInt(255), random.nextInt(255)));
// 获得随机字
int index = random.nextInt(data.length());
String str = data.substring(index, index + 1);
// 写入
g.drawString(str, width / 6 * (i + 1), 20);
}
// 6 干扰线
for (int i = 0; i < 3; i++) {
// 设置颜色--随机数
g.setColor(new Color(random.nextInt(255),random.nextInt(255), random.nextInt(255)));
// 随机绘制先
g.drawLine(random.nextInt(width),random.nextInt(height), random.nextInt(width), random.nextInt(height));
// 随机点
g.drawOval(random.nextInt(width),random.nextInt(height), 2, 2);
}
// end 将图片响应给浏览器
ImageIO.write(image, "jpg",response.getOutputStream());
}
说明： 上述Servlet只需要访问即可生成一个验证码图片，通过浏览器访问，刷新一次浏览器，Servlet被访问一次，图片变化一次。
1. 将上述Servlet在web.xml映射配置。
<servlet>
<description></description>
<display-name>CodeServlet</display-name>
<servlet-name>CodeServlet</servlet-name>
<servlet-class>cn.itheima.response.download.CodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CodeServlet</servlet-name>
<url-pattern>/codeServlet</url-pattern>
</servlet-mapping>
2. 测试： 启动服务器，浏览器直接访问该Servlet地址即可,效果：
http://localhost:8080/发布的应用程序名称/codeServlet
1.2 注册页面添加验证码图片
当验证码生成之后，我们只需通过标签`<img src='servlet访问地址即可'>` 就可以将验证码图片加载到注册页面html中。
`实现步骤`：
1. 编写一个`code.html`页面，编写注册表单`form` ，记得要有验证码哦。
代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(obj){
obj.src='codeServlet?'+new Date().getTime();
}
</script>
</head>
<body>
输入验证码 <input type="text" name="code">
<img alt="验证码制作" src="codeServlet" style="cursor: pointer;" >
</body>
</html>
1.3 点击图片切换验证码
问题： 当验证码在注册页面生成时，我们如何通过点击验证码图片本身，达到切换验证码的效果呢？
思路： 其实我们只需要通过js操作，当用户在浏览器通过点击图片事件，向我们的Servlet发送一次请求即可。
实现步骤：
<script type="text/javascript">
function change(obj){
obj.src='codeServlet?'+new Date().getTime();
}
</script>
// 时间戳 浏览器img 标签会每次都发起请求 访问servlet资源
|
|
收藏
淘帖
踩
