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

来源：互联网发布：自己如何关闭淘宝店铺编辑：程序博客网时间：2024/06/13 23:14

验证码刷新与提交示例（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 + "]";    }}

阅读全文

0 0