博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsp动态生成验证码详细代码
阅读量:6333 次
发布时间:2019-06-22

本文共 3303 字,大约阅读时间需要 11 分钟。

思路:页面加载时执行fnGetcode()方法,获取验证码所有信息;点击“点击图片更换” 再次执行fnGetcode()方法;

1):<body οnlοad="fnGetcode();">

<label>

         验证码:
         <input id="showco" type="hidden" value=""/>
         <input type="text" id="code" name="code" class="input-text" id="yzmText"
          οnfοcus="var offset = $(this).offset();$('#yzm').css({'left': +offset.left-8, 'top': +offset.top-$('#yzm').height()});$('#yzm').show();$('#yzmText').data('hide', 1)"
          />
        </label>
        <div id="yzm" class="yzm">
         
         <img id='checkcode' οnclick='fnGetcode();'
          src=''>
         
         <br />
         <a href="JavaScript:fnGetcode();">
         点击图片更换
         </a>
        </div>

<script type="text/javascript">

  //获得验证码
  function fnGetcode(){
  
   $.post("<%=basePath%>getCode.jsp", null, function(data) {
      var data = eval('(' + data + ')');
       //$.messager.alert("验证码", data.code);
       document.getElementById("checkcode").src="yanzhengma.jsp?r="+data.code;
       $("#showco").val(data.code);
      
   });
  
  }

</script>

</body>

 

2):yanzhengma.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%> <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%> <%@page import="com.db.DBquery"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <base href="<%=basePath%>">         <title>验证码</title>       </head>     <body>     <h3>在jsp页面生成验证码</h3> <hr/> <%  out.clear();  out = pageContext.pushBody();

  String code=request.getParameter("r");     int width=400, height=33;//图片的大小(宽和高)   //构架画布,第一个参数表示画布的宽,第二个参数表示画布的高,第三个参数的含义有待确定   BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);   Graphics g = image.getGraphics();//实例化画图对象   //以下设置背景色   g.setColor(Color.pink);    /*下面两行是定义字体和将字体设置到画布中   第一个参数表示字体,第二个参数表示文本的样式(如:粗体,斜体等),第三个参数表示文字的大小*/   Font DeFont=new Font("楷字", Font.PLAIN, 35);   g.setFont(DeFont);   //将已经设置好的背景颜色填充到指定的画布区域   g.fillRect(0,0, width, height);   //置字体色   g.setColor(Color.blue);     //在画布上输出文字信息,第一个参数表示要显示的文字,第二和第三个参数表示起始点的X、Y坐标   g.drawString(code,90,30);   g.dispose();   ServletOutputStream outStream = response.getOutputStream();   JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);   encoder.encode(image);   outStream.close(); %>   </body> </html>

 

3):getCode.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%> <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%> <%@page import="com.db.DBquery"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 //获取四位数字  String code=DBquery.generateWord();  //System.out.println(code);  // 将认证码存入SESSION  session=request.getSession();     session.setAttribute("sysValidation",code);     //System.out.println("sesscode:"+session.getAttribute("sysValidation"));  String returnString="{\"code\":'"+code+"'}";  response.getWriter().write(returnString);     %>  

转载于:https://www.cnblogs.com/Sailsail/p/4345078.html

你可能感兴趣的文章
JavaSE 学习参考:集合运算
查看>>
【Signals and Systems】 SYLLABUS
查看>>
RH135-2-command-line-interface
查看>>
浅谈OS
查看>>
mac下开启docker API远程调用
查看>>
tar 命令的详解
查看>>
Cisco路由器安全配置
查看>>
第十次作业
查看>>
给定一个字符串s,返回去掉子串"mi"后的字符串。
查看>>
Nginx 外的另一选择,轻量级开源 Web 服务器 Tengine 发布新版本
查看>>
Wrod中超链接的一些技巧
查看>>
我的友情链接
查看>>
IP_VFR-4-FRAG_TABLE_OVERFLOW【cisco设备报错】碎片***
查看>>
Codeforces Round #256 (Div. 2) D. Multiplication Table 【二分】
查看>>
ARM汇编指令格式
查看>>
HDU-2044-一只小蜜蜂
查看>>
HDU-1394-Minimum Inversion Number
查看>>
df -h 卡住
查看>>
第七天1
查看>>
[转] createObjectURL方法 实现本地图片预览
查看>>