验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）

最新推荐文章于 2021-08-06 13:19:54 发布

iamzhuwenhui

最新推荐文章于 2021-08-06 13:19:54 发布

阅读量2k

点赞数

分类专栏： web 文章标签： servlet jquery ajax jquery ajax jsp

本文链接：https://blog.csdn.net/u013632854/article/details/73505994

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）

环境

1、前端jsp
2、服务器tomcat
3、服务端servlet
4、使用tomcat发布项目的相对路径（你写代码的工程目录和发布到tomcat可以访问的目录是不一样的）

这里写图片描述

verify.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

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

<html>
    <head>
        <base href="<%=basePath%>"> 
        <title>验证码</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script src="jquery.form.js"></script>
    </head>

    <body>
        <!-- -- 华 -- 丽 -- 分 -- 割 -- 线 -- -->


        <!-- 验证码 start -->
        <div>
            <!-- 验证码输入框 -->
            <input  id="verifytext" style="color: black;" type="text" name="verifytext" maxlength="4" width="50" placeholder="验证码" />
            <span>
                <!-- 验证码图片，引用get_verify_pic.jsp -->
                <img  src="jsp/get_verify_pic.jsp" id="verifypic_img">
            </span>
            <a href="javascript:void(0)" id="verifypic_a">看不清？点击图片更换</a>
        </div>
        <!-- 验证码 end -->

        <div >
            <button id="btn">保存内容</button>
        </div>

        <!-- -- 华 -- 丽 -- 分 -- 割 -- 线 -- -->
    </body>


    <script type="text/javascript">
        /**
            ******  逻辑部分    ******  
        */
        //使用ajax提交
        $("#btn").click(function(){
            var verify = $("#verifytext").val();
            $.ajax({
                type : 'POST',
                url : "VerifySerlvet",
                data : {
                    verifycode : verify,
                },
                success : function(data, textStatus, jqXHR) {
                    alert("data："+data);
                },
                dataType : "json"
            });
        });

        /**
            ******  点击刷新    ******      
        */
        //点击图片刷新
        $("#verifypic_img").click(function () {
            var timestamp = new Date().getTime();
            $("#verifypic_img").attr('src',$("#verifypic_img").attr('src') + '?' +timestamp );
        });
        //点击a标签刷新
        $("#verifypic_a").click(function () {
            var timestamp = new Date().getTime();
            $("#verifypic_img").attr('src',$("#verifypic_img").attr('src') + '?' +timestamp );
        });
    </script>
</html>

get_verify_pic.jsp（验证码生成工具）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="image/jpeg"
    import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%>
<%!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);
    }%>
<%
    //设置页面不缓存
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);

    // 在内存中创建图象
    int width = 70, height = 32;
    BufferedImage image = new BufferedImage(width, height,
            BufferedImage.TYPE_INT_RGB);

    // 获取图形上下文
    Graphics g = image.getGraphics();

    //生成随机类
    Random random = new Random();

    // 设定背景色
    g.setColor(getRandColor(200, 250));
    g.fillRect(0, 0, width, height);

    //设定字体
    g.setFont(new Font("宋体", Font.PLAIN, 20));

    //画边框
    g.setColor(Color.black);
    g.drawRect(0, 0, width - 1, height - 1);

    // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
    g.setColor(getRandColor(160, 200));
    for (int i = 0; i < 155; 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);
    }

    char[] cs = new char[] { '1', '2', '3', '4', '5', '6', '7', '8',
            '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'A',
            'B', 'M' };

    // 取随机产生的认证码(4位数字)
    String sRand = "";
    for (int i = 0; i < 4; i++) {
        char c = cs[random.nextInt(cs.length)];
        String rand = new Character(c).toString();
        sRand += rand;
        // 将认证码显示到图象中
        g.setColor(new Color(20 + random.nextInt(110), 20 + random
                .nextInt(110), 20 + random.nextInt(110)));
        //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
        g.drawString(rand, 13 * i + 6, 20);
    }

    // 图象生效
    g.dispose();

    // 输出图象到页面
    try {
        ImageIO.write(image, "JPEG", response.getOutputStream());
        // 将认证码存入session
        session.setAttribute("rand", sRand); //这行代码是我们关注的重点
    } catch (Exception e) {
        e.getMessage();
    } finally {
        //解决以调用错误
        out.clear();
        out = pageContext.pushBody();
    }
%>

VerifySerlvet.java

package com.iamzhuwh.pmc;

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;
import com.google.gson.Gson;

/**
 * Servlet implementation class FormSerlvet
 */
//@WebServlet("/VerifySerlvet")
public class VerifySerlvet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public VerifySerlvet() {
        super();
    }

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //解决乱码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");
        //form表单的内容是以name作为key，通过request.getParameter来获取值的
        //text，普通文本
        String verifycode = request.getParameter("verifycode");
        //
        System.out.println("FormSerlvet verifycode:"+verifycode);

        //返回数据
        String json = "";
        PrintWriter writer = null;
        try {
            json = new Gson().toJson(new Result(1,"success"));
            writer = response.getWriter();
        } catch (Exception e) {
            json = new Gson().toJson(new Result(0,"error"));
            e.printStackTrace();
        }finally {
            writer.write(json);
            if(writer!=null)writer.close();
        }
    }

}

class Result {
    private int status;
    private String content;

    public Result() {
        super();
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Result(int status, String content) {
        super();
        this.status = status;
        this.content = content;
    }

    @Override
    public String toString() {
        return "Result [status=" + status + ", content=" + content + "]";
    }

}

iamzhuwenhui

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）

验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）环境1、前端jsp2、服务器tomcat3、服务端servlet4、使用tomcat发布项目的相对路径（你写代码的工程目录和发布到tomcat可以访问的目录是不一样的）verify.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pag
复制链接

扫一扫