How to implement Ajax polling request status

This time I will show you how to implement the Ajax polling request status. What are the precautions for implementing the Ajax polling request status. The following is a practical case, let's take a look.

The function to be implemented here is to log in to the website by scanning the QR code of the WeChat official account with parameters.

But obviously, if ajax requests the server continuously, this will increase the load on the server, so this example uses js's setInterval to periodically call and execute an ajax function to request data from the server, but Use the clearinterval function to clear the timer when the request is successful or has not been successful after a certain number of requests.

Code and comments are as follows: (The backend is implemented using thinkPHP, so the js code contains some thinkPHP syntax rules)

<script></script>
<script>
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;">登录超时，如需登录请刷新页面~&#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;&#39;);
setTimeout(refresh, 3000);
return ;
}
},
error: function(){
}
});
}
//重载页面
function refresh(){
location.reload();
}
</script>

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax+mysq realizes the three-level linkage list of provinces and municipalities

Ajax transmits Json and xml data Detailed explanation of the steps (with code)

The above is the detailed content of How to implement Ajax polling request status. For more information, please follow other related articles on the PHP Chinese website!