http://www.electroniccigarettesinc.com/
这里有个年龄限制跳转的效果,确定大于十八岁后便不再出现这个弹窗,这是怎么实现的呢?
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
很有可能不同。这个秘密字符串你可以选择加密或不加密,或把各种各样的信息加密进去,随便。(比如我推荐把服务器端时间加密进去,这样可以实现一段时间之后自动失效,必须强制重新询问的目的。)而按下按钮ajax请求发出后,也不等待结果返回(没必要),直接把弹出框关闭掉。这样就实现了没有无需跳转(避免刷新,观感上很自然)直接恢复正常浏览页面。
而回头再说这个东西是如何弹出的。本例的网站中,网页实现提示框的代码包含:jQuery、一个jQuery LightBox插件ColorBox,以及提示框自身的
<p>
。在客户请求网页时,服务器端会判断cookie中是否有预先设定好的合法的值。如果没有或错误,则服务器端会把这些代码发出。如果正确,则不发出。这样就实现了这个框点了就不会反复出现。
用火狐的插件Poster,可以方便的发送自定义的POST数据。自己操作一下这个过程,看一下HTTP响应报头的原文,就很容易理解了。
在点击那个按钮前打开调试器(比如我的 Firebug),可以看到它发送的这个 POST 请求带了一个名为
zenid
的 cookie。于是服务器可以把这个 id 与你刚刚做的选择关联起来。实测显示删除这个 cookie 之后这个弹出框确实再次出现了。那个 Ajax 请求不是跳转,只是正常的数据提交而已,告诉服务器你做了什么选择。