使用重写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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
js实现交通灯效果
Jan 13 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
koa+jwt实现token验证与刷新功能
May 30 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python散点图实例之随机漫步
2018/08/27 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
python操作toml文件的示例代码
2020/11/27 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
数控专业自荐书范文
2014/03/16 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年化验室工作总结
2015/04/23 职场文书
故意伤害辩护词
2015/05/21 职场文书
2019财务转正述职报告
2019/06/27 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers