使用重写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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
js实现全选和全不选
Jul 28 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
通过js获取div的background-image属性
2013/10/15 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python类装饰器用法实例
2015/06/04 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
政府采购方案
2014/06/12 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
借钱欠条怎么写
2015/07/03 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
mysql配置SSL证书登录的实现
2021/09/04 MySQL