jsp中生成的验证码和存在session里面的验证码不一致的处理

2023-07-20 19:06:52

今天在调试项目的时候发现，在提交表单的时候的验证码有问题，问题是这样的：就是通过debug模式查看得知：jsp页面生成的验证码和表单输入的页面输入的一样，但是到后台执行的时候，你会发现他们是不一样的，现在上图看看：

1.这是表单提交的时候:

jsp中生成的验证码和存在session里面的验证码不一致的处理

2.这是后台得到的生成的验证码：

jsp中生成的验证码和存在session里面的验证码不一致的处理

3.这是后台得到输入的验证码：

jsp中生成的验证码和存在session里面的验证码不一致的处理

这样的问题还是头一次出现，以前没遇到过，经过google，baidu，最后得知是这样的：因为加载jsp页面比加载session快一些

那怎么办才能解决这个办法呢，

又经过多次搜索，思考，实践，终于想出了个好办法

1.在jsp页面用js生成验证码并保存在变量中，验证码作为参数传到java(继承了HttpServlet)类

2.根据jsp页面中传过来的验证码画出一个有干扰线或干扰点的图片

3.在WEB-INF/web.xml中配置 servlet

4.在jsp页面调用配置好的servlet，一般是通过<img src="servlet名" id="code"/>调用

5.提交数据之前验证

<form onsubmit="return validate();"……/>

局部刷新验证码：<a href="#" onclick="javascript:show();return false;">看不清,换一张！</a>-----return
false;很重要啊

下面直接附上我的例子：

截图如下：

jsp中生成的验证码和存在session里面的验证码不一致的处理

代码如下：

1.JAVA类：CodeServlet.java:

  1. package cn.gov.csrc.servlet;
  2. import java.awt.Color;
  3. import java.awt.Font;
  4. import java.awt.Graphics;
  5. import java.awt.image.BufferedImage;
  6. import java.io.IOException;
  7. import java.util.Random;
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12. import com.sun.image.codec.jpeg.JPEGCodec;
  13. import com.sun.image.codec.jpeg.JPEGImageEncoder;
  14. public class CodeServlet extends HttpServlet {
  15. /**
  16. * 产生验证码图片
  17. */
  18. public void doGet(HttpServletRequest request, HttpServletResponse response)
  19. throws ServletException, IOException {
  20. response.setContentType("image/jpeg");
  21. response.setHeader("Cache-Control", "no-cache");
  22. response.setHeader("Pragma", "No-cache");
  23. response.setDateHeader("Expires", 0L);
  24. int width = 80;
  25. int height = 30;
  26. BufferedImage image = new BufferedImage(width, height, 1);
  27. Graphics g = image.getGraphics();
  28. Random random = new Random();
  29. g.setColor(getRandColor(200, 250));
  30. g.fillRect(0, 0, width, height);
  31. g.setFont(new Font("Arial", 0, 25));
  32. g.setColor(getRandColor(160, 200));
  33. for (int i = 0; i < 155; i++) {
  34. int x = random.nextInt(width + 100);
  35. int y = random.nextInt(height + 100);
  36. int xl = random.nextInt(10);
  37. int yl = random.nextInt(12);
  38. g.drawOval(x, y, x + xl, y + yl);
  39. }
  40. String code = request.getParameter("code");
  41. String sRand = code;
  42. for (int i = 0; i < sRand.length(); i++) {
  43. String rand = sRand.substring(i, i + 1);
  44. g.setColor(new Color(20 + random.nextInt(110), 20 + random
  45. .nextInt(110), 20 + random.nextInt(110)));
  46. g.drawString(rand, 14 * i + 5, 25);
  47. }
  48. g.dispose();
  49. javax.servlet.ServletOutputStream imageOut = response.getOutputStream();
  50. JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);
  51. encoder.encode(image);
  52. }
  53. private Color getRandColor(int fc, int bc) {
  54. Random random = new Random();
  55. if (fc > 255)
  56. fc = 255;
  57. if (bc > 255)
  58. bc = 255;
  59. int r = fc + random.nextInt(bc - fc);
  60. int g = fc + random.nextInt(bc - fc);
  61. int b = fc + random.nextInt(bc - fc);
  62. return new Color(r, g, b);
  63. }
  64. }
package cn.gov.csrc.servlet;

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.servlet.ServletException;


import javax.servlet.http.HttpServlet;


import javax.servlet.http.HttpServletRequest;


import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;


import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class CodeServlet extends HttpServlet {

/**

 * 产生验证码图片

 */

public void doGet(HttpServletRequest request, HttpServletResponse response)

		throws ServletException, IOException {

	response.setContentType("image/jpeg");

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

	response.setHeader("Pragma", "No-cache");

	response.setDateHeader("Expires", 0L);

	int width = 80;

	int height = 30;

	BufferedImage image = new BufferedImage(width, height, 1);

	Graphics g = image.getGraphics();

	Random random = new Random();

	g.setColor(getRandColor(200, 250));

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

	g.setFont(new Font("Arial", 0, 25));

	g.setColor(getRandColor(160, 200));

	for (int i = 0; i &lt; 155; i++) {

		int x = random.nextInt(width + 100);

		int y = random.nextInt(height + 100);

		int xl = random.nextInt(10);

		int yl = random.nextInt(12);

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

	}

	String code = request.getParameter("code");

	String sRand = code;

	for (int i = 0; i &lt; sRand.length(); i++) {

		String rand = sRand.substring(i, i + 1);

		g.setColor(new Color(20 + random.nextInt(110), 20 + random

				.nextInt(110), 20 + random.nextInt(110)));

		g.drawString(rand, 14 * i + 5, 25);

	}

	g.dispose();

	javax.servlet.ServletOutputStream imageOut = response.getOutputStream();

	JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);

	encoder.encode(image);

}

private Color getRandColor(int fc, int bc) {

	Random random = new Random();

	if (fc &gt; 255)

		fc = 255;

	if (bc &gt; 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);

}


}


2.Web.xml文件：




    

  1. <?xml version="1.0" encoding="UTF-8"?>
    2. 

  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    3. 

  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4. 

  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    5. 

  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    6. 

  6. <display-name></display-name>
    7. 

  7. <welcome-file-list>
    8. 

  8. <welcome-file>index.jsp</welcome-file>
    9. 

  9. </welcome-file-list>
    10. 

  10. <servlet>
    11. 

  11. <servlet-name>CodeServlet</servlet-name>
    12. 

  12. <servlet-class>cn.gov.csrc.servlet.CodeServlet</servlet-class>
    13. 

  13. </servlet>
    14. 

  14. <servlet-mapping>
    15. 

  15. <servlet-name>CodeServlet</servlet-name>
    16. 

  16. <url-pattern>/CodeServlet</url-pattern>
    17. 

  17. </servlet-mapping>
    18. 

  18. </web-app>
    19. 





<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<display-name></display-name>

	<welcome-file-list>

		<welcome-file>index.jsp</welcome-file>

	</welcome-file-list>

	<servlet>

		<servlet-name>CodeServlet</servlet-name>

		<servlet-class>cn.gov.csrc.servlet.CodeServlet</servlet-class>

	</servlet>

	<servlet-mapping>

		<servlet-name>CodeServlet</servlet-name>

		<url-pattern>/CodeServlet</url-pattern>

	</servlet-mapping>

</web-app>



3.index.jsp：




    

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    2. 

  2. <%
    3. 

  3. String path = request.getContextPath();
    4. 

  4. String basePath = request.getScheme() + "://"
    5. 

  5. + request.getServerName() + ":" + request.getServerPort()
    6. 

  6. + path + "/";
    7. 

  7. %>
    8. 

  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    9. 

  9. <html>
    10. 

  10. <head>
    11. 

  11. <base href="<%=basePath%>">
    12. 

  12. <title>验证码测试</title>
    13. 

  13. <meta http-equiv="pragma" content="no-cache">
    14. 

  14. <meta http-equiv="cache-control" content="no-cache">
    15. 

  15. <meta http-equiv="expires" content="0">
    16. 

  16. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    17. 

  17. <meta http-equiv="description" content="This is my page">
    18. 

  18. <script language="javascript" type="text/javascript">
    19. 

  19. var code ; //在全局 定义验证码
    20. 

  20. function createCode(){
    21. 

  21. code = "";
    22. 

  22. var codeLength = 5;//验证码的长度
    23. 

  23. //所有候选组成验证码的字符，可以用中文
    24. 

  24. var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',
    25. 

  25. 'D','E','F','G','H','I','J','K','L','M','N','O','P',
    26. 

  26. 'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',
    27. 

  27. 'd','e','f','g','h','i','j','k','l','m','n','o','p',
    28. 

  28. 'q','r','s','t','u','v','w','x','y','z');
    29. 

  29. for(var i=0;i<codeLength;i++){
    30. 

  30. var charIndex = Math.floor(Math.random()*60);
    31. 

  31. code +=selectChar[charIndex];
    32. 

  32. }
    33. 

  33. return code;
    34. 

  34. }
    35. 

  35. function validate (){
    36. 

  36. var inputCode = document.getElementById("vcode").value.toLowerCase();
    37. 

  37. if(inputCode.length <=0){
    38. 

  38. alert("请输入验证码！");
    39. 

  39. return false;
    40. 

  40. }
    41. 

  41. else if(inputCode != code.toLowerCase()){
    42. 

  42. alert("验证码输入错误！");
    43. 

  43. show();//刷新验证码
    44. 

  44. return false;
    45. 

  45. }else{
    46. 

  46. alert("^-^ OK");
    47. 

  47. return true;
    48. 

  48. }
    49. 

  49. }
    50. 

  50. function show(){
    51. 

  51. //显示验证码
    52. 

  52. document.getElementById("code").src="CodeServlet?code="+createCode();
    53. 

  53. }
    54. 

  54. window.onload = function() {
    55. 

  55. //document.onload=show();
    56. 

  56. show();//页面加载时加载验证码
    57. 

  57. //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的；
    58. 

  58. }
    59. 

  59. </script>
    60. 

  60. </head>
    61. 

  61. <body>
    62. 

  62. <form onsubmit="return validate();" action="" method="post">
    63. 

  63. <h3>jsp+js+servlet实现验证码</h3>
    64. 

  64. <br /> 用户名：<input type="text" name="" /><br /> 请输入验证码： <input
    65. 

  65. type="text" id="vcode" style="width: 60;" maxLength="5" /> <img
    66. 

  66. src="" id="code" /> <a href="#" mce_href="#"
    67. 

  67. onclick="javascript:show();return false;">看不清,换一张!</a><br /> <input
    68. 

  68. type="submit" />
    69. 

  69. </form>
    70. 

  70. </body>
    71. 

  71. </html>
    72. 





<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

	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>

<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 language="javascript" type="text/javascript">

var code ; //在全局 定义验证码

function createCode(){

    code = "";

    var codeLength = 5;//验证码的长度

    //所有候选组成验证码的字符，可以用中文

    var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'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','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');

    for(var i=0;i<codeLength;i++){

        var charIndex = Math.floor(Math.random()*60);

        code +=selectChar[charIndex];

    }

    return code;

}

function validate (){

    var inputCode = document.getElementById("vcode").value.toLowerCase();

    if(inputCode.length <=0){

        alert("请输入验证码！");

        return false;

    }

    else if(inputCode != code.toLowerCase()){

        alert("验证码输入错误！");

        show();//刷新验证码

        return false;

    }else{

        alert("^-^ OK");

        return true;

    }

}

function show(){

        //显示验证码

        document.getElementById("code").src="CodeServlet?code="+createCode();

}

window.onload = function() {

		//document.onload=show();

        show();//页面加载时加载验证码

        //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的；

    }

</script>

</head>

<body>


<form onsubmit="return validate();" action="" method="post">


<h3>jsp+js+servlet实现验证码</h3>


<br /> 用户名：<input type="text" name="" /><br /> 请输入验证码： <input


type="text" id="vcode" style="width: 60;" maxLength="5" /> <img


src="" id="code" /> <a href="#" mce_href="#"


onclick="javascript:show();return false;">看不清,换一张!</a><br /> <input


type="submit" />


</form>


</body>


</html>




上一篇：Xamarin生成的APK大小分析

下一篇：linux网络编程学习笔记之三 -----多进程并发服务端