Ajax轮询请求状态(微信公众号带参数二维码登录网站)

 更新时间:2016年09月07日 11:25:51   投稿:mrr  
最近做了一个项目,其中有功能要求通过扫码微信公众号带参数的二维码来登录网站,接下来小编给大家介绍实现思路及代码,一起看看吧

这里要实现的功能是:通过扫码微信公众号带参数的二维码,来登录网站。

但很明显,如果ajax不间断的请求服务器,这样会加重服务器的负荷,所以本例采用的是js的setInterval来周期性调用执行一个ajax函数来来向服务器请求数据,但请求成功或者请求一定次数后还未成功时用clearinterval函数清空计时器。

代码和注释如下:(后端采用thinkPHP实现,所以js代码中含有一些thinkPHP的语法规则)

<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>

好了,代码到此结束,希望对大家有所帮助!

相关文章

  • 菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......
    2012-11-11
  • 关于二次封装jquery ajax办法示例详解

    关于二次封装jquery ajax办法示例详解

    Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML,下面这篇文章主要给大家介绍了关于二次封装jquery ajax办法示例,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 163 AJAX Tab

    163 AJAX Tab

    163 AJAX Tab...
    2007-01-01
  • Django中的Ajax

    Django中的Ajax

    Django 是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站.AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).接下来通过本文给大家介绍django中的ajax,希望对大家有所帮助
    2016-03-03
  • ajax的两种提交方式(get/post)和两种版本

    ajax的两种提交方式(get/post)和两种版本

    本篇也用encodeURI对字符串做了加密,并在类里做了解码,其中需要一些注意的地方在源码里做了注释。get/post两种提交方式,但get提交容易乱码,一定多加注意
    2013-09-09
  • Ajax 框架之SSM整合框架实现ajax校验

    Ajax 框架之SSM整合框架实现ajax校验

    这篇文章主要介绍了Ajax 框架之SSM整合框架实现ajax校验,需要的朋友可以参考下
    2017-04-04
  • js装载xml文件然后发向服务器的实现代码

    js装载xml文件然后发向服务器的实现代码

    js装载xml文件然后发向服务器,具体的代码可以参考下面的思路。
    2009-01-01
  • jsp+ajax实现无刷新上传文件的方法

    jsp+ajax实现无刷新上传文件的方法

    这篇文章主要介绍了jsp+ajax实现无刷新上传文件的方法,结合实例形式分析了ajax无刷新上传文件及jsp后台处理的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 一个奇怪的问题使用ajax提交必须alert才能赋值

    一个奇怪的问题使用ajax提交必须alert才能赋值

    在使用ajax提交的时候将返回值赋给一个变量,无论怎么写都没法赋值,刚开始怀疑js有错但是ie没有反应过来,多次清缓存、部程序都没效果
    2014-01-01
  • 如何解决ajax在google chrome浏览器上失效

    如何解决ajax在google chrome浏览器上失效

    今天闲着没事做个一个ajax小练习,困扰了我很长时间,我写的ajax代码在ie、360、火狐浏览器上运行都是正常的,而在google chrome下无法正常运行,搞的我焦头烂额,最终找到解决办法,在此分享给大家,帮助那些遇到和我一样问题的朋友
    2015-10-10

最新评论