使用重写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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
js实现小时钟效果
2020/03/25 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
接口可以包含哪些成员
2012/09/30 面试题
法制宣传标语
2014/06/23 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2014年文员工作总结
2014/11/18 职场文书
党员带头倡议书
2015/04/29 职场文书
2015年教师节广播稿
2015/08/19 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书