业务场景需求:客户填完报名信息进入付款页面同时生成付款二维码,有效时间2小时,获取当前页面进入时间,每五秒发送一次请求,调用ajax向后台,二维码有效期2小时,超过后刷新页面,后台如果获得付款成功信息,停止ajax请求,弹出报名付款成功弹窗。
代码:
//隐藏成功消息提示框
function msgSuccess() {
$("#successMsg").hide();
}
//页面加载即可获取数据
$(document).ready(function() {
//进入页面的时间
startHour=new Date();
//每五秒调用queryOrderState()请求一次
checkTime = setInterval("queryOrderState()",5000);
});
function queryOrderState(){
//第一步:判断当前时间是不是比开始时间大两小时,大于就刷新页面,不大于就查询订单状态
//获取当前时间
var currentHour=new Date();
var s1 = startHour.getTime();
var s2 = currentHour.getTime();
//时间差(秒数)
var total = Math.floor((s2 - s1)/1000);
//时间差是否大于2小时=7200秒
if(total>7200){
// 刷新页面
window.location.reload();
}else{
//第二步:ajax查询订单状态,如果已经支付提示支付成功,跳主页面
$.ajax({
url : '${pageContext.request.contextPath}/activity/queryOrderState',
async : false,
type : 'GET',
dataType : 'json',
data : {
orderSN : orderSN
},
success : function(text) {
alert(text.data.orderState);
if (text.data.orderState == 11) {
//停止setInterval方法
clearInterval(checkTime);
//弹出提示框
$("#successMsg").show();
//页面跳转到报名首页
setInterval(
"window.location.href = '${pageContext.request.contextPath}/activity/index'",
5000);
}
},
error : function(e) {
//alert("失败,请稍后重试!");
var json = eval('(' + e.responseText + ')');
showErro(json.msg);
}
});
}
}