代码笔记 | ajax实现服务器与浏览器长连接的功能

最新推荐文章于 2021-02-16 01:48:22 发布

转载最新推荐文章于 2021-02-16 01:48:22 发布 · 409 阅读

文章标签：

#代码笔记

代码笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个基于模态框的扫码登录功能实现方案，利用定时器每三秒向服务器请求数据来更新登录状态，并在登录超时的情况下给出提示。

 
<script type="text/javascript" src="__CSS__/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var uid = "{$uid}";
    var i = 0;
    var timer;
    $().ready(function(){
        //打开扫码登录模态框
        $('#login').click(function(){
            //如果用户已经登录，则返回
            if(uid){ 
                return ;
            }
            //打开模态框，通过remote选项从远程加载数据
            $('#loginModel').modal({
                remote: "{:U('user/login')}"
            });
        });
          
        //模态框隐藏之后清空数据
        $("#loginModel").on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
        });
          
        //当模态框显示出来后，通过定时返回来向服务器请求数据，定时器是每三秒请求一次服务器
        $('#loginModel').on('shown.bs.modal', function (e) {
            timer = setInterval(ajax_request, 3000);
        });
    });
      
    //ajax 请求函数，
    function ajax_request(){
        i++;
        //如果已经请求20此没有请求成功，则强制结束，给出提示信息，因为每3s调用一次，供调用20次，大概就是一分钟的时间
        if(i > 20){
            $('.login_info1').html('<span style="color:red;">登录超时，如需登录请刷新页面~</span>');
            clearInterval(timer);
            return ;
        }
          
        $.ajax({
            type: "post",
            url: "{:U('User/login_qrcode')}",
            timeout : 3000,
            data: { "scene_id": $('#scene_id').val() },
            success: function (msg){                
                if(1 == msg.status){
                    $('.login_info1').html('<span style="color:#0C9;">'+msg.info+'</span>');
                    setTimeout(refresh, 3000);
                    return ;
                }
            },
            error: function(){
            }
        });
    }
      
    //重载页面
    function refresh(){
        location.reload();
    }
</script>