13.1点击更换图形验证码
(1)front/signup.html
<div class="form-group"> <div class="input-group"> <input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码"> <span class="input-group-addon captcha-addon"> <img id="captcha-img" class="captcha-img" src="{{ url_for('front.graph_captcha') }}" alt=""> </span> </div> </div>
(2)static/front/css/signup.css
.sign-box { width: 300px; margin: 0 auto; padding-top: 50px; } .captcha-addon { padding: 0; overflow: hidden; } .captcha-img { width: 94px; height: 32px; cursor: pointer; }
body { background: #f3f3f3; } .outer-box { width: 854px; background: #fff; margin: 0 auto; overflow: hidden; } .logo-box { text-align: center; padding-top: 40px; } .logo-box img { width: 60px; height: 60px; } .page-title { text-align: center; } .sign-box { width: 300px; margin: 0 auto; padding-top: 50px; } .captcha-addon { padding: 0; overflow: hidden; } .captcha-img { width: 94px; height: 32px; cursor: pointer; }
(3)static/common/zlparam.js
var zlparam = { setParam: function (href,key,value) { // 重新加载整个页面 var isReplaced = false; var urlArray = href.split('?'); if(urlArray.length > 1){ var queryArray = urlArray[1].split('&'); for(var i=0; i < queryArray.length; i++){ var paramsArray = queryArray[i].split('='); if(paramsArray[0] == key){ paramsArray[1] = value; queryArray[i] = paramsArray.join('='); isReplaced = true; break; } } if(!isReplaced){ var params = {}; params[key] = value; if(urlArray.length > 1){ href = href + '&' + $.param(params); }else{ href = href + '?' + $.param(params); } }else{ var params = queryArray.join('&'); urlArray[1] = params; href = urlArray.join('?'); } }else{ var param = {}; param[key] = value; if(urlArray.length > 1){ href = href + '&' + $.param(param); }else{ href = href + '?' + $.param(param); } } return href; } };
(4)static/front/js/signup.js
$(function () { $('#captcha-img').click(function (event) { var self= $(this); var src = self.attr('src'); var newsrc = zlparam.setParam(src,'xx',Math.random()); self.attr('src',newsrc); }); });
(5)front/signup.html中引用js和css
<script src="{{ static('common/zlparam.js') }}"></script> <script src="{{ static('front/js/front_signup.js') }}"></script> <link rel="stylesheet" href="{{ static('front/css/front_signup.css') }}">
现在点击验证码,就可以更换验证码了。