JS局部刷新图形验证码

开发过程当中,网络安全采取的方法之一,采用验证码功能。一般在注册、登录的程序当中见得比较多。其自己在实现这一功能时,静态页面有一段调用图形验证码的PHP文件,//<img src=’imgcode.php’id=’imgcode’/>,验证码是随机生成的,一般将生成的验证码存入到SESSION当中,以便入其它相关验证操作,由于反应到客户端的图形验证码带有一些杂点,显示时难免会有一点视觉上的干拢,看不清完整的验证码,这时得提供一个刷新验证码的功能,以重新生成验证码。考虑不通过刷新整个页面来达到这个效果,采用AJAX重新生成验证码时,发现SESSION值改变了,客户端修改图片的src属性,给它重新赋值却无任何变化,请求响应后,js代码:

1.var img_obj =  document.getElementById('imgcode');

2.img_obj.src = 'imgcode.php';

3.return;

显然显示在客户端上的图形验证码和服务器上的没有得到统一更新。那么在验证操作时,将不可能得到正确地验证。

原因是由于浏览器的缓存问题,如果两次都是同样的值(src=’imgcode.php’),浏览器一般都不会刷新,所以需要给图片连接动一点手脚。将img_obj.src =’imgcode.php’; 改成

1.img_obj.src = 'imgcode.php?timeamp=' + new Date().getTime();

2,也可以直接写成这样://<img src=”../vdimgck.php” id=”vdimgck” onclick=”javascript:this.src=this.src+’?rnd=’ + Math.random();” alt=”" title=”看不清,点击刷新”/>

加上一个时间值,或是在后面加上一串随机数字,只要保证总是重新刷新即可,再次运行,成功达到局部刷新功能!

其中的AJAX代码,php生成图形验证码的程序代码,网上搜一搜,会有很多,这里就不分享啦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 开发过程当中,网络安全采取的方法之一,采用验证码功能。一般在注册、登录的程序当中见得比较多。其自己在实现这一功能时...
    Leslie_2386阅读 3,192评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,407评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,178评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,539评论 25 709
  • 结构化思维是极其重要的。我曾经看到一篇文章说,“结构化思维让你受益三生三世”。然而,很多人却并不具备结构化思维的能...
    傲看今朝阅读 5,625评论 2 22

友情链接更多精彩内容