关于网页中不刷新页面改变验证码的两种方法

今天做一个注册的页面,需要输入验证码。验证码的生成是动态的,不过要刷新页面,才能改变验证码,因为刷新后浏览器会向服务器提交新的请求,服务器就动态生成新的验证码响应给浏览器。为了能够在不刷新页面的情况下改变验证码,需要JavaScript的支持。

  第一种方法是在请求地址后面带参数,这是一个小窍门。因为浏览器访问服务器的时候地址后面可以带上参数一起传给服务器,而加载内容是只看地址不看后面的参数;另外在<img src="地址"/>中,只要浏览器发现地址改变了就会自动重新加载该地址指向的图片。所以只要给地址后面带上当前时间的参数那么地址就一直都是不一样的,从而让浏览器认为地址发生改变重新去加载验证码图片。具体做法是:<img src="地址" onclick="this.src=this.src+‘?‘+(new Date()).getTime()" /> 这样就可以在鼠标点击图片的时候自动改变src地址后的参数,从而实现自动加载。

  第二种方法是写一个JavaScript方法,在点击链接就调用改方法改变地址从而实现自动改变。具体方法是:
<script type="text/javascript">
function changeVerifyCode(){
var img = document.getElementByIdx(‘imgVcode‘); //在拿到id=imgVcode的<img/>对象
var time = new Date().getTime();//拿到当前时间
img.src = img.src +‘?‘ + time;//拼接img中src的地址,目的和第一种方法一样
}
</script>

调用的地方是<img id="imgVcode" src="地址" />之后的任何地方 。
<a href="javascript:verifyCode()">看不清楚?换个图片</a> 点击就可以改变验证码了^_^

这是从网上截取下来的,仅用于个人收藏。

时间: 2024-11-03 01:30:58

关于网页中不刷新页面改变验证码的两种方法的相关文章

网页设计制作CSS实现隔行换色两种方法

网页设计制作CSS实现隔行换色两种方法 2007-12-21 20:59:44  来源:网页教学网 网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type="text/css">UL.myul1 LI{}</style><ul class="myul1"><li id="li1">111</li><li id="li2"

【转】oracle 中随机取一条记录的两种方法

oracle 中随机取一条记录的两种方法 V_COUNT INT:=0; V_NUM INT :=0; 1:TBL_MYTABLE 表中要有一个值连续且唯一的列FID BEGIN SELECT COUNT(*) INTO V_COUNT FROM  TBL_MYTABLE; SELECT TRUNC(DBMS_RADOM.VALUE(1,V_COUNT+1)) INTO V_NUM FROM DUAL; SELECT * FROM TBL_MYTABLE T WHERE T.FID=V_NUM;

Android中使用Gson解析JSON数据的两种方法

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二种类型是序列(sequence),也就是若干个相关的数据按照一定顺序并列在一起,又叫做数组

Python随机生成验证码的两种方法

Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法 方法一: 利用range方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 # -*- coding: utf-8 -*- import random def generate_verification_c

JS中如何在外部引用私有变量的两种方法 复习

引用:https://blog.csdn.net/liwenfei123/article/details/77964222 运用闭包的特权方法 在构造函数中定义特权方法 这种模式在构造函数中定义了所有私有变量和函数. 能够在构造函数中定义特权方法是因为特权方法作为闭包,能够访问在构造函数中定义的所有变量和函数. function product(){ var name='yuxiaoliang'; this.getName=function(){ return name; } } var obj

java中按字节获得字符串长度的两种方法

jdk本身就自带获取字符串字节长度的api了,但字符串如果包含特殊符号或全半角符号或标点符号获取到的结果会有偏差,最好的证据就是新浪微博的字数统计了 // jdk自带的获取字节长度 //注意getBytes()默认获取的是以文件编码格式的bytes,通常都是UTF-8(可以看api),不同编码格式的bytes,获取到的长度也不同,本人亲自测试过,建议获取有指定编码格式的bytes长度,如:getBytes("UTF-8") int length = new String().getBy

QT 中设置按钮图片和文字的两种方法

1.使用QpushButton自带的API实现: void setIcon(const QIcon &icon) void setText(const QString &text) 该方法使用了自带的函数设置,缺点是无法自由调整图标和文字之间的间距 2.使用Qlabel和布局嵌入在自带的QpushButton中 QLabel* label = new QLabel(); QLabel* label2 = new QLabel(); label2->setStyleSheet(QStr

Html中鼠标悬停显示二级菜单的两种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; float: left; } li{ display: none; } </style> <script type="text/

读取文件中某个字符串前面的内容,两种方法

方法一:利用PushbackReader,默认有个长度为1的缓冲区,创建对象时需要指出缓冲区的大小. public static void function1(File f)throws IOException { try(PushbackReader pr = new PushbackReader(new FileReader(f), 64)) { char[] cbuf = new char[32]; String lastContent = ""; String content