使用重写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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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中创建并处理图象
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
Js sort排序使用方法
2011/10/17 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python3.5绘制随机漫步图
2018/08/27 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
高中数学教学反思
2014/01/30 职场文书
市场调查策划方案
2014/06/10 职场文书
考试作弊检讨
2015/01/27 职场文书
大连星海广场导游词
2015/02/10 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
新闻报道稿范文
2015/07/23 职场文书
办公室管理规章制度
2015/08/04 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL