利用Ajax实现输入完验证码之后直接判断验证码是否正确
2016-08-06 13:39
766 查看
生成验证码的Servlet：
package com.muke;
//生成验证码；
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckCodeServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) {
try {
createCheckCodeImage(68, 22, new Color(150, 180, 195), request,response);
} catch (IOException e) {
e.printStackTrace();
System.out.println("验证码生成失败");
}
}
// 创建验证码图片
private void createCheckCodeImage(int width, int height, Color bgColor,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
BufferedImage bi = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.setColor(bgColor);
g.fillRect(0, 0, width, height);
String codeStr = createCheckCode(request,g);
addRandomLine(g, width, height, 5);
ImageIO.write(bi, "JPG", response.getOutputStream());
//request.getSession().setAttribute("piccode", codeStr);
createCheckCodeSession(request, codeStr);
}
// 添加干扰线
private void addRandomLine(Graphics g, int width, int height, int numbers) {
Random r = new Random();//生成随机数，此处生成随机线条；
for (int i = 0; i < numbers; i++) {
int x1 = r.nextInt(width);
int x2 = r.nextInt(width);
int y1 = r.nextInt(height);
int y2 = r.nextInt(height);
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.drawLine(x1, y1, x2, y2);
}
}
// 随机创建验证码
private String createCheckCode(HttpServletRequest request,Graphics g) {
char[] code = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123466789".toCharArray();
Random r = new Random();
int len = code.length;
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) {
int index = r.nextInt(len);
// 记得在向图片添加验证码前设置验证码的颜色，否则可能会出现有一个验证码看不见的情况
g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
g.drawString(code[index] + "", (i * 15) + 3, 18);
sb.append(code[index]);
}
System.out.println(sb);
return sb.toString();
}
// 把验证码中的数据存储在session，以便来验证登录
private void createCheckCodeSession(HttpServletRequest request, String str) {
request.getSession().setAttribute("piccode", str);
String piccode = (String) request.getSession().getAttribute("piccode");
System.out.println(piccode);
}
}
JSP页面：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<title>无刷新验证码验证</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/checkcode/js/yanzhengma.js"
charset="utf-8"></script>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
<!-- 当输入框输入了四个字符后，就自动进行验证码的验证操作 -->
<script>
function myFunction(id) {
var l=document.getElementById(id).value.length
if(l==4){
var x = document.getElementById(id).value;
checkYanzhengma();
}
}
</script>
<script type="text/javascript">
function reloadCode(){
var time = new Date().getTime();
document.getElementById("imagecode").src="<%=request.getContextPath()%>/CheckCodeServlet?d="+time;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
<h2>无刷新验证码实现</h2>
<!-- 指定输入框的长度为4 -->
验证码：<input type="text" id="checkcode" onkeyup="myFunction(this.id)" maxlength="4"/>
<img alt="验证码" id="imagecode" src="<%=request.getContextPath() %>/CheckCodeServlet"/>
<a href="javascript: reloadCode();">看不清楚</a><br>
<span id="tip" style="display: none; color: red"></span>
</body>
</html>
JavaScript代码：
//通过Ajax实现无刷新验证验证码；
var $ = function(id) {
return document.getElementById(id);
}
// 得到 XMLHttpRequest 对象
var getXMLHttpRequest = function() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {<
a253
br />
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e2) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e3) {
window.alert("Sorry,your browser does not support Ajax!");
}
}
}
return xmlHttp;
}
var xmlHttp = "";
// 检测 username
var checkYanzhengma = function() {
// 得到 XMLHttpRequest
xmlHttp = getXMLHttpRequest();
if (xmlHttp) {
// open document.URL +
xmlHttp.open("post", "CheckYanzhengma", true);//url对应CheckYanzhengma.java文件，true 异步,false 同步
// window.alert(document.URL + "CheckYanzhengma");
// 设置 Content-type
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送一个HTTP协议的头文件
// 设置回调函数
xmlHttp.onreadystatechange = statechange;
// send
var sendData = "checkcode=" + $("checkcode").value;
xmlHttp.send(sendData);
}
}
// ajax回调函数
var statechange = function() {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xmlHttp.readyState == "4") {
// 200: "OK"
// 404: 未找到页面
if (xmlHttp.status == "200") { //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
var isOK = xmlHttp.responseText;
if ("t" == isOK) {
$("tip").innerHTML = "验证码正确!";
} else if ("f" == isOK) {
$("tip").innerHTML = "验证码错误，请重新输入!";
//$("checkcode").value = "";
}
$("tip").style.display="inline-block";//将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
}
}
}
验证验证码的Servlet：
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
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("/CheckYanzhengma")
public class CheckYanzhengma extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckYanzhengma() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String piccode = (String) request.getSession().getAttribute("piccode");
String checkcode = request.getParameter("checkcode");
checkcode = checkcode.toUpperCase();//toUpperCase() 方法用于把字符串转换为大写,即用户输入的小写字母转换为大写字母后再做判断;
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(checkcode.equals(piccode)){
out.print("t");
}else{
out.print("f");
//piccode=null;
}
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}
package com.muke;
//生成验证码；
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckCodeServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) {
try {
createCheckCodeImage(68, 22, new Color(150, 180, 195), request,response);
} catch (IOException e) {
e.printStackTrace();
System.out.println("验证码生成失败");
}
}
// 创建验证码图片
private void createCheckCodeImage(int width, int height, Color bgColor,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
BufferedImage bi = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.setColor(bgColor);
g.fillRect(0, 0, width, height);
String codeStr = createCheckCode(request,g);
addRandomLine(g, width, height, 5);
ImageIO.write(bi, "JPG", response.getOutputStream());
//request.getSession().setAttribute("piccode", codeStr);
createCheckCodeSession(request, codeStr);
}
// 添加干扰线
private void addRandomLine(Graphics g, int width, int height, int numbers) {
Random r = new Random();//生成随机数，此处生成随机线条；
for (int i = 0; i < numbers; i++) {
int x1 = r.nextInt(width);
int x2 = r.nextInt(width);
int y1 = r.nextInt(height);
int y2 = r.nextInt(height);
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.drawLine(x1, y1, x2, y2);
}
}
// 随机创建验证码
private String createCheckCode(HttpServletRequest request,Graphics g) {
char[] code = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123466789".toCharArray();
Random r = new Random();
int len = code.length;
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) {
int index = r.nextInt(len);
// 记得在向图片添加验证码前设置验证码的颜色，否则可能会出现有一个验证码看不见的情况
g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
g.drawString(code[index] + "", (i * 15) + 3, 18);
sb.append(code[index]);
}
System.out.println(sb);
return sb.toString();
}
// 把验证码中的数据存储在session，以便来验证登录
private void createCheckCodeSession(HttpServletRequest request, String str) {
request.getSession().setAttribute("piccode", str);
String piccode = (String) request.getSession().getAttribute("piccode");
System.out.println(piccode);
}
}
JSP页面：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<title>无刷新验证码验证</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/checkcode/js/yanzhengma.js"
charset="utf-8"></script>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
<!-- 当输入框输入了四个字符后，就自动进行验证码的验证操作 -->
<script>
function myFunction(id) {
var l=document.getElementById(id).value.length
if(l==4){
var x = document.getElementById(id).value;
checkYanzhengma();
}
}
</script>
<script type="text/javascript">
function reloadCode(){
var time = new Date().getTime();
document.getElementById("imagecode").src="<%=request.getContextPath()%>/CheckCodeServlet?d="+time;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
<h2>无刷新验证码实现</h2>
<!-- 指定输入框的长度为4 -->
验证码：<input type="text" id="checkcode" onkeyup="myFunction(this.id)" maxlength="4"/>
<img alt="验证码" id="imagecode" src="<%=request.getContextPath() %>/CheckCodeServlet"/>
<a href="javascript: reloadCode();">看不清楚</a><br>
<span id="tip" style="display: none; color: red"></span>
</body>
</html>
JavaScript代码：
//通过Ajax实现无刷新验证验证码；
var $ = function(id) {
return document.getElementById(id);
}
// 得到 XMLHttpRequest 对象
var getXMLHttpRequest = function() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {<
a253
br />
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e2) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e3) {
window.alert("Sorry,your browser does not support Ajax!");
}
}
}
return xmlHttp;
}
var xmlHttp = "";
// 检测 username
var checkYanzhengma = function() {
// 得到 XMLHttpRequest
xmlHttp = getXMLHttpRequest();
if (xmlHttp) {
// open document.URL +
xmlHttp.open("post", "CheckYanzhengma", true);//url对应CheckYanzhengma.java文件，true 异步,false 同步
// window.alert(document.URL + "CheckYanzhengma");
// 设置 Content-type
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送一个HTTP协议的头文件
// 设置回调函数
xmlHttp.onreadystatechange = statechange;
// send
var sendData = "checkcode=" + $("checkcode").value;
xmlHttp.send(sendData);
}
}
// ajax回调函数
var statechange = function() {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xmlHttp.readyState == "4") {
// 200: "OK"
// 404: 未找到页面
if (xmlHttp.status == "200") { //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
var isOK = xmlHttp.responseText;
if ("t" == isOK) {
$("tip").innerHTML = "验证码正确!";
} else if ("f" == isOK) {
$("tip").innerHTML = "验证码错误，请重新输入!";
//$("checkcode").value = "";
}
$("tip").style.display="inline-block";//将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
}
}
}
验证验证码的Servlet：
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
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("/CheckYanzhengma")
public class CheckYanzhengma extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckYanzhengma() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String piccode = (String) request.getSession().getAttribute("piccode");
String checkcode = request.getParameter("checkcode");
checkcode = checkcode.toUpperCase();//toUpperCase() 方法用于把字符串转换为大写,即用户输入的小写字母转换为大写字母后再做判断;
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(checkcode.equals(piccode)){
out.print("t");
}else{
out.print("f");
//piccode=null;
}
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用C语言实现输入密码以星号显示并判断密码是否正确
- php判断用户输入验证码是否正确
- 生成验证码并判断用户是否输入正确
- 如何实现验证码输入正确与否的判断？
- c#数字验证码功能，以及判断用户输入是否正确。
- 实现同步加载验证码和用户名是否存在的判断通过Ajax
- C语言实现利用switch函数判断是否交换输入的数字
- 网络应用：生成随机验证图片并在输入验证码后判断验证码是否正确
- 如何实现验证码输入正确与否的判断？
- jsp中验证码的实现，以及ajax实现的正确的验证，解决了session不同步的问题。（我这里已测试过，可以直接用）
- jquery，Ajax判断验证码是否正确，不正确阻止提交
- 利用jQuery实现的Ajax 验证用户名是否存在
- ajax实现判断是否可以注册
- 利用jQuery实现的Ajax 验证用户名是否存在
- 利用5个标签，4个文本框，2个按钮，自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类，当点击“判断三边”时，若能构成三角形，在标签5上显示“可以构成三角形！”，如不能构成三角形，在标签5上显示“不能构成三
- 利用AjaxPro2.0实现在页面直接修改数据
- JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示
- 判断用户是否登录,阻止直接在地址栏输入网址访问!
- ExtJS Tree利用json(直接传List TreeNode，不需要转化为JSONArray或通过JSP传)在Struts 2实现Ajax动态加载树结点