AJAX 实现动态刷新验证码

最新推荐文章于 2020-11-13 13:01:12 发布
最新推荐文章于 2020-11-13 13:01:12 发布
阅读量2.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyx19941129/article/details/50098861
版权
本文介绍了如何在登录界面实现验证码的动态刷新。通过定义一个指向验证码Servlet的<img>标签，并利用Ajax进行局部刷新。当用户点击'看不清'或'换一张'时，触发异步事件，更新验证码图片的src，结合当前时间戳防止浏览器缓存，从而达到刷新验证码的效果。
摘要由CSDN通过智能技术生成

前段时间做东西的时候与到一个问题，就是登陆界面的验证码刷新。


登录界面验证码怎么实现？

    只需要定义一个<img  src="CodeServlet"/>  , 将图片的src指定为一个验证码的servlet即可


接下来介绍如何实现动态刷新验证码！

//Ajax验证码局部刷新

    var xmlhttp;

    function refreshCode() {
        xmlhttp = new XMLHttpRequest;
        xmlhttp.open("get", "CodeServlet", true);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    document.getElementBy

最低0.47元/天 解锁文章
实干才能兴邦
关注
AJAX实现验证码刷新和判断验证码正误
Li3422的博客
11-05 985
`JAVA验证码实现刷新功能，并通过ajax技术异步判断验证码正误 接上一个博客，对验证码进行刷新，使用ajax技术 前端代码如下： 通过点击超链接“看不清？换一张”进行验证码的更换 <div class="form-group"> <label>验证码</label> <span id="msgVerify" style="color: red"></span>
使用Ajax进行验证码的刷新
zhouhz11862的博客
03-23 398
[color=orange][size=medium][align=center]利用Ajax实现验证码的刷新[/align][/size][/color] 废话不多说，大部分网站都有设置验证码防止恶意攻击。现在用最简单的实现进行我们的验证码刷新。 注册页面：login.jsp 欢迎登陆 ...
动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱
LiQiyao的博客
02-15 3000
在开发JavaWeb应用时，动态生成验证码是一项必须的功能，在这里我们将会详细的讲解如何实现这一功能。
Ajax实现带有验证码的局部刷新登录界面
10-21
很多登录界面都有验证码功能局部刷新效果，接下来通过本文给大家分享ajax实现带有验证码的局部刷新登录界面，感兴趣的朋友一起看看吧
AJAX实现验证码区的局部刷新（初学AJAX小结）
码农橙子Yang
04-11 1424
AJAX实现验证码区的局部刷新（初学AJAX小结）  AjaxServlet浏览器IEWeb               AJAX不是一种新技术，而是6种web技术的综合体。          不废话了，进入正题“验证码局部刷新”！          此测试需要3个文件：                   文件1：产生验证码图片的Servlet                 
asp.net ajax实现无刷新验证码
01-02
1、首先是在后台验证码的aspx文件的Page_Load中的事件代码： 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI....
用户登录ajax局部刷新验证码
dcti47416的博客
08-23 323
用户登录的时候，登录页面附带验证码图片，用户需要输入正确的验证码才可以登录，验证码实现局部刷新操作。 效果如图： 代码如下： #生成验证码及图片的函数 newcode.py import random from PIL import Image, ImageDraw, ImageFont, ImageFilter _letter_cases = "abcdefg...
验证码生成 点击刷新 ajax校验
weixin_33816611的博客
05-30 97
页面文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getSer...
jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
10-23
主要介绍了jsp+ajax实现的局部刷新较验验证码,基于onblur事件触发较验功能,以实例形式详细的分析了前台显示、图片生成及Ajax动态验证等详细技巧,具有一定参考借鉴价值,需要的朋友可以参考下
采用ajax实现的图片验证码
10-26
采用ajax技术实现的图形验证码，在前端进行验证。验证码信息为图片。每一行代码均有注释，通俗易懂。 实现步骤: 1、创建web工程 2、在jsp页面，编写一个 3、编写一个servlet，在servlet中产生图形验证码 ------------------------------------------------------------ //1、给客户端作出的回应是以图片的方式来回应 response.setContentType("image/jpeg"); //2、创建一个图形缓冲区，用于绘制图形 (宽度，高度，颜色的生成方案) BufferedImage image = new BufferedImage(800,600,BufferedImage.TYPE_INT_RGB); //3、创建一支画笔（图形设备接口）用于绘图 Graphics g = image.getGraphics(); //4、指定图笔的颜色 g.setColor(getColor(200,256)); //5、绘制一个矩形框，作为验证码的背景 g.fillRect(0,0, 800,600); //产生一个输出流，准备把图片以流的方式，输出到客户端 OutputStream out = response.getOutputStream(); //输出在图形缓冲区中，绘制的图片 ImageIO.write(image,"jpg",out); //关闭流 out.close(); //随机生成背景颜色 private Random rd = new Random(); //产生随机数类 public Color getColor(int start,int end){ int r = start+rd.nextInt(end-start); int g = start+rd.nextInt(end-start); int b = start+rd.nextInt(end-start); return new Color(r, g, b);//根据三原色的值，随机在指定范围内，生成一种颜色 } --------------------------------------------------------------------------- 0-120 比较适合文字的颜色 100-200 适合干扰线条的颜色 200-255 适合背景颜色 --------------------------------------------------------------------------- 生成图片中的文字: 1、先编写一个字符串，包含：数字，大小字母 private String s = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; 2、在产生背景之后，编写如下代码，产生四个字符(并且，把生成字符，保存在session中，在登录的时候用来做判断) String code=""; //用于保存生成的四个字符 for(int i=0;i<4;i++){ //生成一个随机数，它的取值范围，一定要在s这个字符串的长度范围之内 int index = rd.nextInt(s.length()); //2 //把index作为下标，来取得字符串的中某一个字符 char c = s.charAt(index); //指定文字的颜色----深色段 g.setColor(getColor(0,120)); //创建一个字体 Font f = new Font("隶书",Font.ITALIC|Font.BOLD,60+rd.nextInt(60)); //把字体关联到画笔 g.setFont(f); code+=c; //把生成的字符连接成一个字符串 //把文字输出到图片上 g.drawString(String.valueOf(c), 100+i*80+rd.nextInt(100),200+rd.nextInt(150)); } request.getSession().setAttribute("code",code);//把生成的验证码信息，存储到session中，登录的时候，用来作判断 ------------------
AJAX+jsp无刷新验证码实例
01-03
AJAX+jsp无刷新验证码实例<br>很不错的技术！！
Ajax动态刷新验证码图片
weixin_30292745的博客
04-08 464
一》 原理： 　　把用代码生成的图片存放到硬盘当中，然后在返回存储路径把图片通过图片标签的 src 属性 自动加载到浏览器中 二》 步骤 　　　　1. 首先用GDI+ 绘图 把验证码图片给绘制出来 　　　　2. 然后提前判断硬盘里是否有已生成的图片，如果有，则删除，以避免节省硬盘空间 　　　　3. 把生成的验证码存放到 Session 会话当中，以供前台验证 填写验证码的准确性， 在...
利用Ajax技术实现验证码的刷新和局部验证
MY Blog
03-15 1333
&lt;div class="iteye-blog-content-contain" style="font-size: 14px"&gt;&lt;/div&gt; 先说点无关紧要的吧，两个知识点：  (1)，方法一：使用Js局部刷新验证码的做法是在页面中加上一个img标签，src属性设为一个servlet或者.jsp来请求验证码图片，html代码如下: &lt;img src="Ima...
利用JS实现局部刷新验证码(非Ajax)
tangyaya8的博客
09-29 831
今天做联系登录验证码问题,开始想着用Ajax实现局部刷新,最后发现,服务端返回的是二进制,而非JPEG格式,导致页面不能显示,最后想到,可以把&lt;img&gt;的请求地址换成后台验证码图片地址&lt;img class="check_img form-control"height="100%" width="100%" src="${pageContext.request.contextPa...
ajax图片验证码刷新
DBasdas的博客
11-13 252
今天在做ajax图片验证码刷新时，出现了刷新不了的问题 $(document).ready(function(){ $("#img_code").click(function () { console.log(this); console.log($("#img_code")) $.ajax({ url:"{% url 'img_code' %}", type: 'GET' }); this.
jsp+ajax局部刷新校验验证码，onblur触发校验
iteye_804的博客
02-25 264
前台显示页面: welcome.jsp &lt;%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org
08-React redux
最新发布
09-14
redux 相关代码以及 redux 开发者工具
Ajax实现验证码局部刷新与登录界面
"Ajax实现带有验证码的局部刷新登录界面，通过使用Ajax技术，结合验证码功能，可以提供更快、更流畅的用户体验，避免整个页面的重新加载。Ajax登录方式利用JavaScript异步发送请求，只更新登录界面的部分内容，保持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值