关于在前端验证后端生成的验证码
2016-06-05 12:15
435 查看
最近试着在前端获取后端生成的验证码,从而把验证码也做成前端验证,出现了如下问题:
如图所示,每次页面获取的验证码都是上次的,第一次获取为空,查了下资料发现是JSP加载顺序的问题。我后台生成的验证码是放在session中,在页面用EL表达式从session作用域中获取,如果在JS中获取,如var code = ‘<%=session.getAttribute(“XX”)%>’ 这种也是从session中获取,页面的session对象是在请求页面后加载页面时产生的,那么问题就来了,因为验证码的获取是异步的,也就是说页面加载验证码要比加载页面慢一步,所以session中记录不到当前的最新的验证码,只能记录上一次的数据,而且这种方式有缺陷,在前端记录验证码不安全,还有就是不刷新页面无法更新session中的验证码值,因此这种方式作废。
换一种方式,我们可以使用AJAX来实现这个效果,当验证码输入长度符合要求时,发送AJAX请求后台返回最新验证码,然后进行比对,实测这种方案是可取的。
AJAX代码
关键点在于要加上 async:false 关闭异步加载,否则验证码还未获取就返回result,这样就可以实时获取最新验证码,不过凡是在前端进行的验证都不安全,尤其是验证码,最好还是在后台验证。
如图所示,每次页面获取的验证码都是上次的,第一次获取为空,查了下资料发现是JSP加载顺序的问题。我后台生成的验证码是放在session中,在页面用EL表达式从session作用域中获取,如果在JS中获取,如var code = ‘<%=session.getAttribute(“XX”)%>’ 这种也是从session中获取,页面的session对象是在请求页面后加载页面时产生的,那么问题就来了,因为验证码的获取是异步的,也就是说页面加载验证码要比加载页面慢一步,所以session中记录不到当前的最新的验证码,只能记录上一次的数据,而且这种方式有缺陷,在前端记录验证码不安全,还有就是不刷新页面无法更新session中的验证码值,因此这种方式作废。
换一种方式,我们可以使用AJAX来实现这个效果,当验证码输入长度符合要求时,发送AJAX请求后台返回最新验证码,然后进行比对,实测这种方案是可取的。
AJAX代码
//获取后台生成的验证码 function getVerCode() { var result = ""; $.ajax({ url:'/askVerCode', type:"GET", dataType:"json", async:false,//关闭异步加载,这样只有加载完成才进行下一步 success:function (data) { result = data.code; } }); return result; }
关键点在于要加上 async:false 关闭异步加载,否则验证码还未获取就返回result,这样就可以实时获取最新验证码,不过凡是在前端进行的验证都不安全,尤其是验证码,最好还是在后台验证。
相关文章推荐
- java自动生成验证码插件-kaptcha
- kindeditor 批量上传 上传失败 thinkphp swfupload session
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证(升级版)
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 杰奇登录后的东西都是在session里面的
- 再谈Jquery Ajax方法传递到action(补充)
- Dom在ajax技术中的作用说明
- AJAX实现瀑布流触发分页与分页触发瀑布流的方法
- ASP中SESSION无法保存问题的解决办法
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- 如何识别高级的验证码的技术总结第1/4页
- 探讨Ajax中同步与异步之间的区别
- Oracle中的Connect/session和process的区别及关系介绍
- ajax中data传参的两种方式分析
- 原生AJAX写法实例分析