java基于ajax实现验证码

最新推荐文章于 2022-04-20 09:05:00 发布

whoami_zy

最新推荐文章于 2022-04-20 09:05:00 发布

阅读量744

点赞数 2

分类专栏： AJAX java 文章标签： java ajax 验证码

本文链接：https://blog.csdn.net/whoami_zy/article/details/53422123

版权

java 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

AJAX

1 篇文章 0 订阅

订阅专栏

后台数据与前台相互交互，实现页面的局部更新。现在以java后台验证码为例。
首先实现验证码的制作
验证码：
1.BufferedImage图像数据缓冲区
2.Graphics画笔，绘制图片
3.Color获取颜色
4.random随机生成验证码
5.ImageIO输出图片
具体代码如下：

 package com.whoami;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.lang3.RandomStringUtils;
/**
 * 
 * @author ZhangYong
 *验证码的服务端
 */
@WebServlet("/IMGCheck")
public class IMGCheck extends HttpServlet {
	private static final long serialVersionUID = 1L;
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//定义一个图片的大小
			int width = 75;
			int height = 25;
			//获取一个随机的字符长度为5
			String s =RandomStringUtils.random(5, true, true);
			//将获得的s保存在session中，比较后清除
			HttpSession session = request.getSession(true);
			session.setAttribute("keyword", s);
			//设置响应后的输出为图片格式类型
			response.setContentType("images/jpeg");
			//不要缓存页面
			response.setHeader("Pragma", "no-cache");
			response.setHeader("Cache-Control", "no-cache");
			//设置过期时间
			response.setDateHeader("Expires", 0);
			ServletOutputStream out = response.getOutputStream();
			//BufferedImage.TYPE_INT_RGB 设置像素
			BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
			Graphics g = image.getGraphics();
			  g.setColor(getRandColor(200, 250));
			 
			  g.fillRect(0, 0, width, height);
			  Font mFont = new Font("华文新魏", Font.HANGING_BASELINE, 18);// 设置字体
			  g.setFont(mFont);
			  g.setColor(getRandColor(160, 200));
			  Random random = new Random();
			   for (int i = 0; i < 155; i++) {
			    int x2 = random.nextInt(width);
			    int y2 = random.nextInt(height);
			    int x3 = random.nextInt(12);
			    int y3 = random.nextInt(12);
			    g.drawLine(x2, y2, x2 + x3, y2 + y3);
			   }
			 
			   // 将认证码显示到图象中
			   g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
			  g.drawString(s, 10, 18);
			  //图片生效
			  g.dispose();
			  ImageIO.write((BufferedImage)image, "JPEG", out);
			  out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	//给定范围获得随机颜色
	 private Color getRandColor(int fc, int bc) {
		 
		  Random random = new Random();
		  if (fc > 255)
		      fc = 255;
		  if (bc > 255)
		      bc = 255;
		  int r = fc + random.nextInt(bc - fc);
		  int g = fc + random.nextInt(bc - fc);
		  int b = fc + random.nextInt(bc - fc);
		  return new Color(r, g, b);
		 }
}

在web.xml中定义这个实现图片的servlet

  <servlet>
    <servlet-name>imgServer</servlet-name>
    <servlet-class>com.whoami.IMGCheck</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>imgServer</servlet-name>
    <url-pattern>/imgServer</url-pattern>
  </servlet-mapping>











然后编写jsp页面，实现图片的输出。
<body>
	<center>
		<input type="text" id="keyword">
		<img alt="验证码" src="imgServer" id="authcode"><br>
		<p id="resultImg"></p>
		<button id="btnKey">提交</button>
	</center>
</body> 



然后我们实现点击验证码能够更新验证码

前提是现在jquery中现在相应的jquery.js文件

 这是我下载的版本，然后引用。也可以下载压缩版jquery/jquery-2.2.2.min.js

$(document).ready(function(){ 

});

});

实现动态变化

现在就改写验证了。那么在创建一个验证用户输入的验证码的服务端
package com.whoami;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
/**
 * 
 * @author ZhangYong
 *验证验证码
 */
public class IMGCheckServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String key = (String)request.getSession().getAttribute("keyword");
		System.out.println("key:"+key);
		String keyword = request.getParameter("keyword");
		System.out.println(keyword);
		PrintWriter out =response.getWriter();
		HashMap<String, Boolean> result = new HashMap<String, Boolean>();
		if(key.equalsIgnoreCase(keyword))
		{
			result.put("RESULT", true);
			
		}else{
			result.put("RESULT", false);
			
		}
		out.print(JSONArray.fromObject(result));//将返回数据封装成json的类型，和前端的类型一致。如果不需要封装成json，须将前台的ajax的方法中dataType:"json",删除。就能正常运行了。转换成json格式需要在网上下载jar包
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		doGet(request, response);
	}

}



前段实现用户输入验证 ajax代码
$(document).ready(function (){
		$("#btnKey").click(function (){
			$.ajax({
				type:"POST",//请求方式
				url:"imgCheck",//请求路径
				dataType:"json",//上文说到的类型一致 
				data:{
					keyword:$("#keyword").val(),
				},                   //传递的数据
				success:function(data){
					if (data[0].RESULT === true) {
						$("#resultImg").html(data[0].RESULT);  //在标签P中打印返回值，data就是后端的返回值
					} else {
						$("#resultImg").html(data[0].RESULT);
					}
				},  //服务端返回的值
				error:function(jqXHR){
					$("#resultImg").html(jqXHR.state);
				}  //服务端错误，404，500.。。。。。
			});
				});
	}); 



然后java和ajax实现验证码就结束了

验证码的简单实现
package com.whoami;

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.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.RandomStringUtils;

public class imgSimple extends HttpServlet {
	private static final long serialVersionUID = 1L;
   /**
    * 1.BufferedImage图像数据缓冲区
   	*		2.Graphics画笔，绘制图片
   	*		3.Color获取颜色
   	*		4.random随机生成验证码
   	*		5.ImageIO输出图片
    */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		final int width = 75;
		final int height = 25;
		String s = RandomStringUtils.random(4, true, true);
		BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics g = img.getGraphics();
		Color c = new Color(200, 150, 222);
		g.setColor(c);
		g.fillRect(0, 0, width, height);
		Random random = new Random();
		g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
		g.drawString(s, 10, 18);
		request.getSession().setAttribute("keyword", s);
		ImageIO.write(img, "JPG", response.getOutputStream());
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

whoami_zy

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java基于ajax实现验证码

后台数据与前台相互交互，实现页面的局部更新。现在以java后台验证码为例。首先实现验证码的制作验证码：1.BufferedImage图像数据缓冲区2.Graphics画笔，绘制图片3.Color获取颜色4.random随机生成验证码5.ImageIO输出图片具体代码如下： package com.whoami;import java.awt.Color;im
复制链接

扫一扫