使用重写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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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截取中文字符串的问题
2006/07/12 PHP
我的论坛源代码(四)
2006/10/09 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python 多维List创建的问题小结
2019/01/18 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
一组SQL面试题
2016/02/15 面试题
大学生村官任职感言
2014/01/09 职场文书
个人收入证明范本
2014/01/12 职场文书
节约用水的口号
2014/06/20 职场文书
三好学生评语大全
2014/12/29 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
五一晚会主持词
2015/07/01 职场文书
如何做好工作总结!
2019/04/10 职场文书
python实现简易名片管理系统
2021/04/11 Python
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python