Maison >interface Web >js tutoriel >Ajax implémente la fonction de connexion longue entre le serveur et le navigateur

Ajax implémente la fonction de connexion longue entre le serveur et le navigateur

韦小宝
韦小宝original
2018-01-10 09:54:542160parcourir

Cet article présente principalement les informations pertinentes sur la fonction d'ajax consistant à réaliser une longue connexion entre le serveur et le navigateur. Il partage le code source ajax avec tout le monde. Les amis intéressés par ajax peuvent se référer à cet article

Oui Parfois. , le serveur doit transmettre activement les données au navigateur. Ajax est utilisé pour implémenter cette fonction. Veuillez voir ici pour plus de détails :


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


.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

À propos de l'exemple d'encapsulation de la requête réseau ajax

Solution au problème de restauration et d'actualisation d'Ajax

Comment résoudre le problème lorsqu'une requête AJAX contient un tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn