脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 重写url机制实现验证码换一张

使用重写url机制实现验证码换一张功能

 更新时间：2017年08月01日 09:25:37   作者：JYLM  
重写URL机制：为了保证一个url的地址唯一，可每次向服务器传递的参数不一样即可。此处在实现验证码的换一张的功能时，就是利用了改变参数列表的值进行刷新。具体详细代码大家参考下本文

 重写URL机制：为了保证一个url的地址唯一，可每次向服务器传递的参数不一样即可。

由数据请求的抱头信息可分析到：抱头信息包括http协议，IP地址，端口号，工程名，请求参数列表，要想访问的资源不发生变化，只能变化参数连表。

此处在实现验证码的换一张的功能时，就是利用了改变参数列表的值进行刷新。

详细代码实现：

<%@page import="javax.imageio.ImageIO"%> 
<%@page import="java.awt.Font"%> 
<%@page import="java.awt.Color"%> 
<%@page import="java.awt.Graphics"%> 
<%@page import="java.awt.image.BufferedImage"%> 
<%@ page contentType="image/jpeg" language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
int w=100; 
int h=30; 
BufferedImage bi=new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB); 
Graphics g=bi.getGraphics(); 
Color c=g.getColor(); 
Font f=g.getFont();  
Random r=new Random(); 
Color bg=new Color(150+r.nextInt(100),150+r.nextInt(100),150+r.nextInt(100)); 
g.setColor(bg); 
g.fillRect(0, 0, w, h); 
String code=""; 
for(int i=1;i<=4;i++){ 
int num=r.nextInt(10); 
code=code+num; 
Color num_c=new Color(r.nextInt(150),r.nextInt(150),r.nextInt(150)); 
g.setColor(num_c); 
g.drawString(String.valueOf(num), 20*i, h/2); 
} 
request.getSession().setAttribute("code", code); 
//清空缓存 
response.setHeader("pragma", "bo-cache"); 
response.setHeader("cache-control", "bo-cache"); 
response.addDateHeader("expires", 0); 
ImageIO.write(bi, "jpeg", response.getOutputStream()); 
out.close(); 
 %>

添加登录页面： 

<%@ page contentType="text/html; charset=utf-8" 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%>" rel="external nofollow" > 
  <title>My JSP 'login.jsp' starting page</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"> 
  <!-- 
  <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" > 
  --> 
  <script type="text/javascript"> 
function changeimage(){ 
var d=new Date();//生成时间戳， 
document.getElementById("img").src="image.jsp?t="+d;//由变化的时间使参数连表发生变化，url重写 
} 
</script> 
 </head> 
 <body> 
 <font color="red">${requestScope.msg }</font> 
  <form action="loginServlet" method="post"> 
  name:<input type="text" name="uname"><br> 
  pwd:<input type="pwd" name="upwd"><br> 
  code:<input type="text" name="code" size="5"><img id="img" alt="" src="image.jsp "><a onclick="changeimage()">换一张</a><br> 
  <input type="submit" > 
  </form> 
 </body> 
</html>

利用时间的变化，每次生成时间戳，传参给请求的url，达到重写url的目的，从而实现了换一张的刷新功能。

总结

以上所述是小编给大家介绍的使用重写url机制实现验证码换一张功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    这篇文章主要介绍了JS+HTML实现自定义上传图片按钮并显示图片功能的方法,结合实例形式分析了JavaScript图片上传、编码转换等相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • google广告之另类js调用实现代码

    google广告之另类js调用实现代码

    这篇文章主要介绍了google广告之另类js调用实现代码,需要的朋友可以参考下
    2020-08-08
  • xmlplus组件设计系列之网格（DataGrid）(10）

    xmlplus组件设计系列之网格（DataGrid）(10）

    xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之xmlplus网格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript中伪协议 javascript:使用探讨

    JavaScript中伪协议 javascript:使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码，它由javascript的解释器运行
    2014-07-07
  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • nodejs创建web服务器之hello world程序

    nodejs创建web服务器之hello world程序

    本文给大家分享nodejs创建web服务器之hello world程序，node真的很好用，不仅用v8引擎来解析了javascript外，还提供了高度优化的应用库，真的很好，有需要的朋友一起来学习吧
    2015-08-08
  • js复制文本到粘贴板(Clipboard.writeText())

    js复制文本到粘贴板(Clipboard.writeText())

    这篇文章主要介绍了js复制文本到粘贴板(Clipboard.writeText())，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 深入理解ES6的迭代器与生成器

    深入理解ES6的迭代器与生成器

    本篇文章主要介绍了深入理解ES6的迭代器与生成器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 浅谈tudou土豆网首页图片延迟加载的效果

    浅谈tudou土豆网首页图片延迟加载的效果

    经常上tudou网，发现tudou首页加载图片的功能很有意思，tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了"娱乐"这个板块，才开始加载图片的。
    2010-06-06
  • 微信小程序实现手势解锁的示例详解

    微信小程序实现手势解锁的示例详解

    手势解锁是生活中常用的解锁方式，本文将通过微信小程序实现手势解锁这一功能，本实例以工具的形式可以嵌入到不同的项目之中，感兴趣的可以了解一下
    2022-04-04

最新评论