使用重写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 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python实现中文分词FMM算法实例
2015/07/10 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
汉语专业应届生求职信
2013/10/01 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
开票员岗位职责
2015/02/12 职场文书
校运会新闻稿
2015/07/17 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL