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


Posted in Javascript onAugust 01, 2017

 重写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机制实现验证码换一张功能

总结

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

Javascript 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
详解如何探测小程序返回到webview页面
May 14 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
js实现拖拽上传图片功能
Aug 01 #Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 #Javascript
使用JavaScript进行表单校验功能
Aug 01 #Javascript
SpringMVC简单整合Angular2的示例
Jul 31 #Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 #Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 #Javascript
You might like
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python实现将excel文件转化成CSV格式
2018/03/22 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
py-charm延长试用期限实例
2019/12/22 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Linux的主要特性
2016/09/03 面试题
圣诞节红领巾广播稿
2014/02/03 职场文书
解除劳动合同协议书
2014/04/14 职场文书
感恩的演讲稿
2014/05/06 职场文书
演讲稿的写法
2014/05/19 职场文书
幽灵公主观后感
2015/06/09 职场文书