jquery實現(xiàn)無刷新驗證碼的簡單實例

當前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1351 次日期：2016-06-27 11:46:30

溫馨提示：易賢網(wǎng)小編為您整理了“jquery實現(xiàn)無刷新驗證碼的簡單實例”,方便廣大網(wǎng)友查閱！

下面小編就為大家?guī)硪黄猨query實現(xiàn)無刷新驗證碼的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

1. 思路:

頁面上的驗證碼圖片是servlet,采用jquery實現(xiàn)異步校驗信息

2. 所用到的文件

VerifyCodeServlet.java --用于生成圖片的servlet

ResultServlet.java --用于校驗驗證碼正確性的servlet

verifyCode.js --校驗的js文件

jquery.js --jquery包里的源文件

verifyCode.jsp --頁面

3. 代碼

VerifyCodeServlet.java

Java代碼

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics2D;

import java.awt.image.BufferedImage;

import java.util.Random;

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

public class VerifyCodeServlet extends HttpServlet {

// 驗證碼圖片的寬度。

private int width = 60;

// 驗證碼圖片的高度。

private int height = 20;

// 驗證碼字符個數(shù)

private int codeCount = 4;

private int x = 0;

// 字體高度

private int fontHeight;

private int codeY;

char[] codeSequence = { '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' };

/**

* 初始化驗證圖片屬性

public void init() throws ServletException {

// 從web.xml中獲取初始信息

// 寬度

String strWidth = this.getInitParameter("width");

// 高度

String strHeight = this.getInitParameter("height");

// 字符個數(shù)

String strCodeCount = this.getInitParameter("codeCount");

// 將配置的信息轉(zhuǎn)換成數(shù)值

try {

if (strWidth != null && strWidth.length() != 0) {

width = Integer.parseInt(strWidth);

}

if (strHeight != null && strHeight.length() != 0) {

height = Integer.parseInt(strHeight);

}

if (strCodeCount != null && strCodeCount.length() != 0) {

codeCount = Integer.parseInt(strCodeCount);

}

} catch (NumberFormatException e) {

}

x = width / (codeCount + 1);

fontHeight = height - 2;

codeY = height - 4;

}

protected void service(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, java.io.IOException {

// 定義圖像buffer

BufferedImage buffImg = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

Graphics2D g = buffImg.createGraphics();

// 創(chuàng)建一個隨機數(shù)生成器類

Random random = new Random();

// 將圖像填充為白色

g.setColor(Color.WHITE);

g.fillRect(0, 0, width, height);

// 創(chuàng)建字體，字體的大小應(yīng)該根據(jù)圖片的高度來定。

Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);

// 設(shè)置字體。

g.setFont(font);

// 畫邊框。

g.setColor(Color.BLACK);

g.drawRect(0, 0, width - 1, height - 1);

// 隨機產(chǎn)生160條干擾線，使圖象中的認證碼不易被其它程序探測到。

g.setColor(Color.BLACK);

for (int i = 0; i < 160; i++) {

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(12);

int yl = random.nextInt(12);

g.drawLine(x, y, x + xl, y + yl);

}

// randomCode用于保存隨機產(chǎn)生的驗證碼，以便用戶登錄后進行驗證。

StringBuffer randomCode = new StringBuffer();

int red = 0, green = 0, blue = 0;

// 隨機產(chǎn)生codeCount數(shù)字的驗證碼。

for (int i = 0; i < codeCount; i++) {

// 得到隨機產(chǎn)生的驗證碼數(shù)字。

String strRand = String.valueOf(codeSequence[random.nextInt(36)]);

// 產(chǎn)生隨機的顏色分量來構(gòu)造顏色值，這樣輸出的每位數(shù)字的顏色值都將不同。

red = random.nextInt(255);

green = random.nextInt(255);

blue = random.nextInt(255);

// 用隨機產(chǎn)生的顏色將驗證碼繪制到圖像中。

g.setColor(new Color(red, green, blue));

g.drawString(strRand, (i + 1) * x, codeY);

// 將產(chǎn)生的四個隨機數(shù)組合在一起。

randomCode.append(strRand);

}

// 將四位數(shù)字的驗證碼保存到Session中。

HttpSession session = req.getSession();

session.setAttribute("validateCode", randomCode.toString());

// 禁止圖像緩存。

resp.setHeader("Pragma", "no-cache");

resp.setHeader("Cache-Control", "no-cache");

resp.setDateHeader("Expires", 0);

resp.setContentType("image/jpeg");

// 將圖像輸出到Servlet輸出流中。

ServletOutputStream sos = resp.getOutputStream();

ImageIO.write(buffImg, "jpeg", sos);

sos.close();

}

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics2D;

import java.awt.image.BufferedImage;

import java.util.Random;

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

public class VerifyCodeServlet extends HttpServlet {

// 驗證碼圖片的寬度。

private int width = 60;

// 驗證碼圖片的高度。

private int height = 20;

// 驗證碼字符個數(shù)

private int codeCount = 4;

private int x = 0;

// 字體高度

private int fontHeight;

private int codeY;

char[] codeSequence = { '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' };

/**

* 初始化驗證圖片屬性

public void init() throws ServletException {

// 從web.xml中獲取初始信息

// 寬度

String strWidth = this.getInitParameter("width");

// 高度

String strHeight = this.getInitParameter("height");

// 字符個數(shù)

String strCodeCount = this.getInitParameter("codeCount");

// 將配置的信息轉(zhuǎn)換成數(shù)值

try {

if (strWidth != null && strWidth.length() != 0) {

width = Integer.parseInt(strWidth);

}

if (strHeight != null && strHeight.length() != 0) {

height = Integer.parseInt(strHeight);

}

if (strCodeCount != null && strCodeCount.length() != 0) {

codeCount = Integer.parseInt(strCodeCount);

}

} catch (NumberFormatException e) {

}

x = width / (codeCount + 1);

fontHeight = height - 2;

codeY = height - 4;

}

protected void service(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, java.io.IOException {

// 定義圖像buffer

BufferedImage buffImg = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

Graphics2D g = buffImg.createGraphics();

// 創(chuàng)建一個隨機數(shù)生成器類

Random random = new Random();

// 將圖像填充為白色

g.setColor(Color.WHITE);

g.fillRect(0, 0, width, height);

// 創(chuàng)建字體，字體的大小應(yīng)該根據(jù)圖片的高度來定。

Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);

// 設(shè)置字體。

g.setFont(font);

// 畫邊框。

g.setColor(Color.BLACK);

g.drawRect(0, 0, width - 1, height - 1);

// 隨機產(chǎn)生160條干擾線，使圖象中的認證碼不易被其它程序探測到。

g.setColor(Color.BLACK);

for (int i = 0; i < 160; i++) {

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(12);

int yl = random.nextInt(12);

g.drawLine(x, y, x + xl, y + yl);

}

// randomCode用于保存隨機產(chǎn)生的驗證碼，以便用戶登錄后進行驗證。

StringBuffer randomCode = new StringBuffer();

int red = 0, green = 0, blue = 0;

// 隨機產(chǎn)生codeCount數(shù)字的驗證碼。

for (int i = 0; i < codeCount; i++) {

// 得到隨機產(chǎn)生的驗證碼數(shù)字。

String strRand = String.valueOf(codeSequence[random.nextInt(36)]);

// 產(chǎn)生隨機的顏色分量來構(gòu)造顏色值，這樣輸出的每位數(shù)字的顏色值都將不同。

red = random.nextInt(255);

green = random.nextInt(255);

blue = random.nextInt(255);

// 用隨機產(chǎn)生的顏色將驗證碼繪制到圖像中。

g.setColor(new Color(red, green, blue));

g.drawString(strRand, (i + 1) * x, codeY);

// 將產(chǎn)生的四個隨機數(shù)組合在一起。

randomCode.append(strRand);

}

// 將四位數(shù)字的驗證碼保存到Session中。

HttpSession session = req.getSession();

session.setAttribute("validateCode", randomCode.toString());

// 禁止圖像緩存。

resp.setHeader("Pragma", "no-cache");

resp.setHeader("Cache-Control", "no-cache");

resp.setDateHeader("Expires", 0);

resp.setContentType("image/jpeg");

// 將圖像輸出到Servlet輸出流中。

ServletOutputStream sos = resp.getOutputStream();

ImageIO.write(buffImg, "jpeg", sos);

sos.close();

}

ResultServlet.java

Java代碼

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ResultServlet extends HttpServlet {

/**

* The doGet method of the servlet. <br>

* This method is called when a form has its tag value method equals to get.

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

/**

* The doPost method of the servlet. <br>

* This method is called when a form has its tag value method equals to post.

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

String validateC = (String) request.getSession().getAttribute("validateCode");

String veryCode = request.getParameter("c");

PrintWriter out = response.getWriter();

if(veryCode==null||"".equals(veryCode)){

out.println("驗證碼為空");

}else{

if(validateC.equals(veryCode)){

out.println("驗證碼正確");

}else{

out.println("驗證碼錯誤");

}

out.flush();

out.close();

}

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ResultServlet extends HttpServlet {

/**

* The doGet method of the servlet. <br>

* This method is called when a form has its tag value method equals to get.

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

/**

* The doPost method of the servlet. <br>

* This method is called when a form has its tag value method equals to post.

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

String validateC = (String) request.getSession().getAttribute("validateCode");

String veryCode = request.getParameter("c");

PrintWriter out = response.getWriter();

if(veryCode==null||"".equals(veryCode)){

out.println("驗證碼為空");

}else{

if(validateC.equals(veryCode)){

out.println("驗證碼正確");

}else{

out.println("驗證碼錯誤");

}

out.flush();

out.close();

}

verifyCode.js

Js代碼

function changeImg(){

var imgSrc = $("#imgObj");

var src = imgSrc.attr("src");

imgSrc.attr("src",chgUrl(src));

}

//時間戳

//為了使每次生成圖片不一致，即不讓瀏覽器讀緩存，所以需要加上時間戳

function chgUrl(url){

var timestamp = (new Date()).valueOf();

url = url.substring(0,17);

if((url.indexOf("&")>=0)){

url = url + "×tamp=" + timestamp;

}else{

url = url + "?timestamp=" + timestamp;

}

return url;

}

function isRightCode(){

var code = $("#veryCode").attr("value");

code = "c=" + code;

$.ajax({

type:"POST",

url:"resultServlet",

data:code,

success:callback

});

}

function callback(data){

$("#info").html(data);

}

function changeImg(){

var imgSrc = $("#imgObj");

var src = imgSrc.attr("src");

imgSrc.attr("src",chgUrl(src));

}

//時間戳

//為了使每次生成圖片不一致，即不讓瀏覽器讀緩存，所以需要加上時間戳

function chgUrl(url){

var timestamp = (new Date()).valueOf();

url = url.substring(0,17);

if((url.indexOf("&")>=0)){

url = url + "×tamp=" + timestamp;

}else{

url = url + "?timestamp=" + timestamp;

}

return url;

}

function isRightCode(){

var code = $("#veryCode").attr("value");

code = "c=" + code;

$.ajax({

type:"POST",

url:"resultServlet",

data:code,

success:callback

});

}

function callback(data){

$("#info").html(data);

}

verifyCode.jsp

Html代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>test verify code</title>

</head>

<body>

</body>

</html>

以上這篇jquery實現(xiàn)無刷新驗證碼的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考

更多信息請查看網(wǎng)絡(luò)編程

上一篇：js獲取隱藏元素寬高的實現(xiàn)方法

下一篇：JavaScript:Array類型全面解析

易賢網(wǎng)手機網(wǎng)站地址：jquery實現(xiàn)無刷新驗證碼的簡單實例

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合