Ajax 폴링 요청 상태를 구현하는 방법

이번에는 Ajax 폴링 요청 상태 구현 방법과 Ajax 폴링 요청 상태 구현 시 주의 사항이 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.

여기서 구현할 기능은 위챗 공식 계정에서 매개변수로 QR코드를 스캔해 웹사이트에 로그인하는 것입니다.

하지만 당연히 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>

이 기사의 사례를 읽으신 후 방법을 마스터하신 것으로 생각됩니다. 흥미로운 내용이 있으니 다른 PHP 중국어 웹사이트 관련 기사도 주목해주세요!

추천 자료:

Ajax+mysq는 지방자치단체의 3단계 연결 목록을 구현합니다.

Json 및 xml 데이터의 Ajax 전송 단계에 대한 자세한 설명(코드 포함)

위 내용은 Ajax 폴링 요청 상태를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!