如何用js实现年龄限制跳转效果? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何用js实现年龄限制跳转效果?

杨冬芳 2016-06-14 16:25:17 1236

screenshot
这里有个年龄限制跳转的效果,确定大于十八岁后便不再出现这个弹窗,这是怎么实现的呢?

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();
    }
前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:38:03

    点击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响应报头的原文,就很容易理解了。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程