这里有个年龄限制跳转的效果,确定大于十八岁后便不再出现这个弹窗,这是怎么实现的呢?
function ageNotMatch(){
location.href='http://www.google.com/';
}
function callAgeMatch(form) {
$('#button_submit').css('opacity', '.4');
var dataString = 'ageaccepted=yes';
$.ajax({
type: "POST",
url: "age_confirm_hander.php", //这里的ajax跳转不明白
data: dataString,
success: function(response) {
}
});
$.fn.colorbox.close();
}
点击18+的时候,浏览器向服务器发送了一个ajax请求,相当于访问服务器的页面age_confirm_hander.php,带上POST数据ageaccepted=yes。
这个脚本识别了这个POST数据后,在返回的HTTP响应报头中要求浏览器设定一个cookie,为他们自己识别的一个值。截获HTTP响应报头,可以发现如下的数据:
zenid=otnvfkko177kljp489v00j90o4; path=/; domain=.www.electroniccigarettesinc.com; HttpOnly
你的zenid很有可能不同。这个秘密字符串你可以选择加密或不加密,或把各种各样的信息加密进去,随便。(比如我推荐把服务器端时间加密进去,这样可以实现一段时间之后自动失效,必须强制重新询问的目的。)
而按下按钮ajax请求发出后,也不等待结果返回(没必要),直接把弹出框关闭掉。这样就实现了没有无需跳转(避免刷新,观感上很自然)直接恢复正常浏览页面。
而回头再说这个东西是如何弹出的。本例的网站中,网页实现提示框的代码包含:jQuery、一个jQuery LightBox插件ColorBox,以及提示框自身的
在客户请求网页时,服务器端会判断cookie中是否有预先设定好的合法的值。如果没有或错误,则服务器端会把这些代码发出。如果正确,则不发出。这样就实现了这个框点了就不会反复出现。
用火狐的插件Poster,可以方便的发送自定义的POST数据。自己操作一下这个过程,看一下HTTP响应报头的原文,就很容易理解了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。