关于在前端验证后端生成的验证码

最近试着在前端获取后端生成的验证码,从而把验证码也做成前端验证,出现了如下问题：

如图所示,每次页面获取的验证码都是上次的,第一次获取为空,查了下资料发现是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,这样就可以实时获取最新验证码,不过凡是在前端进行的验证都不安全,尤其是验证码,最好还是在后台验证。