- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章JavaWeb 实现验证码功能(demo)由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
验证码不用多说,在 WEB-APP 中一般应用于:登录、注册、买某票、秒杀等场景。大家都接触过~可以说是千奇百怪,各式各样.
DEMO 目标功能 。
开工 。
页面:demo1.jsp 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<%@ page language=
"java"
import
=
"java.util.*"
pageEncoding=
"UTF-8"
%>
<!DOCTYPE html>
<html>
<head>
<title>验证示例</title>
<meta http-equiv=
"pragma"
content=
"no-cache"
>
<meta http-equiv=
"cache-control"
content=
"no-cache"
>
<meta http-equiv=
"expires"
content=
"0"
>
<style type=
"text/css"
>
img {
width: 87px;
height: 33px;
border: 1px solid gray;
}
#msg {color: red;}
/* 后台返回的验证信息显示为红色 */
</style>
</head>
<body>
<form action=
"${pageContext.request.contextPath}/check"
method=
"post"
enctype=
"application/x-www-form-urlencoded"
>
验证码:<input type=
"text"
name=
"code"
size=
"4"
maxlength=
"4"
id=
"code"
/>
<img id=
"code-img"
src=
""
alt=
"验证码"
style=
"display: none;"
/>
<a href=
"javascript:void(0)"
rel=
"external nofollow"
id=
"changeCode"
>看不清?换一张</a> <br/><br/>
<input type=
"submit"
value=
"验证"
/> <span id=
"msg"
>${msg}</span>
</form>
</body>
</html>
|
说明:
"看不清?换一张" 的 href 属性写成 javascript:void(0) 是为了防止页面刷新,这里的更换功能交给 AJAX 异步完成.
JavaScript 工具:util.js(为啥用原生 JS?任性呗~哈) 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/**
* 获取 XMLHttpRequest Object
* @returns XMLHttpRequest Object
*/
function getXHR() {
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp =
new
XMLHttpRequest();
}
catch
(e) {
// Internet Explorer
try
{
xmlHttp =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
catch
(e) {
try
{
xmlHttp =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
catch
(e) {
alert(
"Sorry, 您的浏览器不支持 AJAX!"
);
return
false
;
}
}
}
return
xmlHttp;
}
|
页面中的 JavaScript 代码 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script type=
"text/javascript"
src=
"${pageContext.request.contextPath}/js/util.js"
></script>
<script type=
"text/javascript"
>
var xhr = getXHR();
// 获得 XMLHttpRequest 对象
// 页面加载时加载验证码,但验证码初始为隐藏状态
window.onload=function() {
// 为 onreadystatechange 事件注册回调函数。由于 xhr 为全局变量,所以注册后就不用管啦
xhr.onreadystatechange=function() {
if
(xhr.readyState==
4
&& xhr.status==
200
) {
document.getElementById(
'code-img'
).src=
"data:image/png;base64,"
+xhr.responseText;
}
}
xhr.open(
"GET"
,
"${pageContext.request.contextPath}/captcha/code"
,
true
);
xhr.send(
null
);
}
// 验证码输入框获得焦点时,验证码状态更改为显示
document.getElementById(
'code'
).onfocus=function() {
document.getElementById(
'code-img'
).style.display=
"inline"
;
}
// 异步请求,更换验证码
document.getElementById(
'changeCode'
).onclick=function() {
xhr.open(
"GET"
,
"${pageContext.request.contextPath}/captcha/code"
,
true
);
xhr.send(
null
);
}
</script>
|
生成验证码的 CaptchaCodeServlet.java 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package
com.leo.web.captcha;
import
java.io.IOException;
import
javax.servlet.ServletException;
import
javax.servlet.annotation.WebServlet;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
import
com.leo.util.ImageUtil;
import
cn.dsna.util.images.ValidateCode;
@WebServlet
(
"/captcha/code"
)
public
class
CaptchaCodeServlet
extends
HttpServlet {
private
static
final
long
serialVersionUID = 1L;
@Override
protected
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException
{
// 生成验证码(构造参数分别代表:宽度,高度,字符数,干扰线条数)
ValidateCode code =
new
ValidateCode(
87
,
33
,
4
,
23
);
// 将验证码保存到 session 中,用于验证
request.getSession().setAttribute(
"code"
, code.getCode());
// 响应返回验证码图片 base64 编码后的数据给浏览器
response.getWriter().write(ImageUtil.encodeImg2Base64(code.getBuffImg(),
"png"
));
}
@Override
protected
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException
{
this
.doGet(request, response);
}
}
|
说明:
这里使用了 Servlet3.0 的新特性-用注解配置 url-pattern(用起来挺爽的),也就是说简单的项目不再需要 web.xml 了,但是 Tomcat 需要 7.0+.
其次生成验证码我用了一个小工具:ValidateCode.jar。工具十分简单,不合心意完全可以自己写。但也就是因为功能太少,所以我又写了一个 ImageUtil。我也有打算自己开源一个验证码工具出来.
ImageUtil.java 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
package
com.leo.util;
import
java.awt.image.BufferedImage;
import
java.io.ByteArrayOutputStream;
import
java.io.IOException;
import
javax.imageio.ImageIO;
import
sun.misc.BASE64Encoder;
public
class
ImageUtil {
/**
* 将图片二进制数据进行 base64 编码
* @param bufImg
* @return base64 编码后的字符串
*/
public
static
String encodeImg2Base64(BufferedImage bufImg, String formatName) {
ByteArrayOutputStream outputStream =
null
;
try
{
outputStream =
new
ByteArrayOutputStream();
ImageIO.write(bufImg, formatName, outputStream);
}
catch
(IOException e) {
throw
new
RuntimeException(
"Base64 编码失败!"
+e.getMessage());
}
BASE64Encoder encoder =
new
BASE64Encoder();
return
encoder.encode(outputStream.toByteArray());
}
private
ImageUtil() {}
// 工具类私有化构造方法是常见的做法
}
|
说明:
为什么要把图片二进制数据进行 Base64编码 呢?因为<img/>标签虽然可以直接设置 src 属性值为${pageContext.request.contextPath}/captcha/code请求相应的 Servlet 来得到二进制数据直接显示,但在 AJAX 异步请求中响应返回的是 xhr.responseText 。当把数据直接给 img 标签的 src 属性时,用 Chrome-tool 查看只会是一堆二进制当作文本解析的乱码字符,所以才要多这一步.
或许我作为萌新不知道一些其它的方便技巧。但若不想使用异步,那直接 img src 设置为请求地址将是最简单的选择,更换验证码无非是监听事件 img src 重新设置为该地址(再来一次请求).
后台验证验证码:CheckServlet.jave 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
package
com.leo.web.controller;
import
java.io.IOException;
import
javax.servlet.ServletException;
import
javax.servlet.annotation.WebServlet;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
@WebServlet
(
"/check"
)
public
class
CheckServlet
extends
HttpServlet {
private
static
final
long
serialVersionUID = -6588625852621588221L;
@Override
public
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException
{
String encoding =
"UTF-8"
;
request.setCharacterEncoding(encoding);
response.setContentType(
"text/html;charset="
+encoding);
/* 验证码验证 */
String inputCode = request.getParameter(
"code"
);
// 获得 session 中的正确验证码
String realCode = (String) request.getSession().getAttribute(
"code"
);
System.out.println(
"input: "
+inputCode+
"\nreal: "
+realCode);
// 用于 Debug
if
(!(inputCode!=
null
&& realCode!=
null
&&
inputCode.equalsIgnoreCase(realCode))) {
// 若验证码不正确:回到页面并提示错误
request.setAttribute(
"msg"
,
"验证码错误!请重新输入"
);
request.getRequestDispatcher(
"/demo1.jsp"
).forward(request, response);
return
;
}
// 验证码正确,响应一句话表示 OK
response.getWriter().write(
"验证成功!"
);
}
@Override
public
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException
{
doGet(request, response);
}
}
|
说明:
doGet() 方法一开始是对中文乱码进行处理,编码统一设为 UTF-8。在实际项目中,编码问题通常交给一个 Filter 完成,达到一劳永逸的效果.
效果 。
警告!警告!!颜控请速速撤离!!! 。
写在最后 。
以上就是 JavaWeb 验证码小 DEMO 的全部内容啦,最好是把验证提交也搞成异步的,这里就不整了。WEB 项目中还没尝试过添加验证码功能的小伙伴可以动手搞起来啦!实际项目中利用 JQuery 等框架处理 AJAX,再配上一个漂亮的前端页面就完美啦.
以上所述是小编给大家介绍的JavaWeb 实现验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我网站的支持! 。
原文链接:http://www.jianshu.com/p/9284a31e6ce8 。
最后此篇关于JavaWeb 实现验证码功能(demo)的文章就讲到这里了,如果你想了解更多关于JavaWeb 实现验证码功能(demo)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
就在我放松下来以为我对数组上下文中的指针有一个公平的理解时,我对下面的程序再次感到沮丧。我已经理解了数组 arr,arr 和 &arr 大小相同,但类型不同,但我无法牢牢掌握以下程序的输出。我尝试将其
这个问题在这里已经有了答案: Why whole structure can not be compared in C, yet it can be copied? (6 个答案) 关闭 9 年前。
今天我试图在我的代码中使用系统属性。当我输入 ./gradlew -Dorg.gradle.project.env=demo test 时,虽然我在脚本中成功打印了 env ,但发生了 NullPoi
概要 本节要实现的是多表关联查询的简单demo。场景是根据id查询某商品分类信息,并展示该分类下的商品列表。 1、Mysql测试数据 新建表Category(商品分类)和Product(商品
SpringCloud + Docker 的便利和强大真的超乎想象,我已经入坑了…好了,不说废话,记录一个简单的 Demo 供其他同学排坑。 前言 惯例不能丢,先上源代码:docker-demo
在没介绍正文之前先给大家介绍下数据更新方法支持的连贯操作方法有: 在上一篇文章中我们实现了数据的删除和批量删除,这一篇文章我们将实现数据的更新。 首先依然是预期效果图: 点击修
过滤html标签在php中可以有内置的函数了,但它过滤的太干净了,我们就整理了一下些利用正则来过滤指定html标签的例子,具体如下所示。 采集的时候有时候需要过滤掉多余的标签属性,比如 img标签
UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添
项目里面有一个需求,要对sql进行简单的语法分析 为了避免sql里面的字符串和注释对语法分析做干扰,我写了一个java函数,对sql进行修剪,删除里面字符串和注释,用空格代替 周末闲着没事,我用g
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实
最近项目组同事跟我说遇到一个SQL性能问题,他说全表只有69条记录,客户端执行耗费了两分多钟,很不科学。我帮了分析出了原因并得到解决。下面小编安装类似表结构,构造了一个案例,测试截图如下所示:
新的一年又要到来了,各个大的公司又在这年末为大家送上了新春的祝福,支付宝还是延续了这几年的传统,在年末为大家送上了集五福的活动,为了大家能更快更好的扫出来大大的“福”,今天就带领大家利用python
我已经安装了http://download.jboss.org/jbpm/release/6.4.0.Final/jbpm-6.4.0.Final-installer-full.zip在这里找到htt
1、准备环境 服务器:linux(debian)+nginx+mysql+php 环境 框架:laravel 5.5 (确认能跑通) 需求:每天晚上1点执行定时操作 2、定时任务的步骤
下面通过一个小例子来说明cmake编译一个c++项目,生成可执行文件: 整理目录结构: CMake Lists.txt addlib build main.cpp 电脑上没有tree命
本文实例讲述了php实现基于微信公众平台开发SDK(demo)扩展的方法。分享给大家供大家参考。具体分析如下: 该扩展基于官方的微信公众平台SDK,这里只做了简单地封装,实现了一些基本的功能(如天
验证码不用多说,在 WEB-APP 中一般应用于:登录、注册、买某票、秒杀等场景。大家都接触过~可以说是千奇百怪,各式各样。 DEMO 目标功能 验证码页面输入。 页面更换验证码(异
下拉刷新在越来越多的app中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉。在交互习惯上已经形成定性。之前在我的文章《ios学习笔记34—egotableviewp
一切尽在代码中,代码附有注释,欢迎大家参考。 ?
我试图找到答案,但没有任何结果。bin/console的一些命令和 ./psh.phar没有描述,所以很难理解它们的用途。 Shopware 6 中是否有从数据库中删除所有演示数据的命令? 最佳答案
我是一名优秀的程序员,十分优秀!