jQuery 每隔5秒钟发送一个ajax请求 请求后台数据接口

1、我们会用到:window.οnlοad=function(){} ,一个页面貌似只能用一次,可以自己去试试:

2、html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据交互</title>
<script src="__JS__/jquery.min.js"></script>
</head>
<body>
<table id='table-test'>
<tr>
<th>期数</th>
<th>code码</th>
<th>和值</th>
</tr>
</table>
</body>
<script>
//假设每隔5秒发送一次请求
window.onload = function () {
getApi();
}
function getApi() {
//设置时间 5-秒 1000-毫秒 这里设置你自己想要的时间
setTimeout(getApi,5*1000);
$.ajax({
url: 'http://www.andy.com/xxx',
type: 'get',
dataType: 'json',
success: function (data) {
//方法中传入的参数data为后台获取的数据
// console.log(data.data);
var data1 = data['data']['history'];
// console.log(data1);
var tr;
$.each(data1,function (index,item) {
//字符串转数组
var code = item['code'].split(',');
//数组转字符串:
var strCode = code.join(' ');
// console.log(strCode)
tr = '<td>'+item['issue']+'</td>'+'<td>'+strCode+'</td>'+'<td>'+item['sum']+'</td>';
$('#table-test').append('<tr>'+tr+'</tr>')
})
}
})
}
</script>
</html>
3、效果图:依次每隔5秒请求一次

图一:注意看server_time

图二:还是注意看server_time

两次时间相减 = 5秒!也就是说5秒钟请求了一次接口!

4、但是不做判断的话,循环出来的值就跳入死循环了,之前这么写是为了展示效果,下面才是如果接口发过来的code=2,才每隔5秒请求一次,直到请求到最新数据,code=1,才停止请求!修改一下方法,代码如下:

function getApi() {
$.ajax({
url: 'http://www.andy.com/xxx',
type: 'get',
dataType: 'json',
success: function (data) {
//方法中传入的参数data为后台获取的数据
// console.log(data.msg);
if(data.code == 1){
var data1 = data['data']['history'];
// console.log(data1);
var tr;
$.each(data1,function (index,item) {
//字符串转数组
var code = item['code'].split(',');
//数组转字符串:
var strCode = code.join(' ');
// console.log(strCode)
tr = '<td>'+item['issue']+'</td>'+'<td>'+strCode+'</td>'+'<td>'+item['sum']+'</td>';
$('#table-test').append('<tr>'+tr+'</tr>');
})
}else {
//设置请求api接口时间
setTimeout(getApi,5*1000);
}
}
})
}
 
————————————————
版权声明:本文为CSDN博主「IT-Andy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39188306/article/details/88600665

原文地址:https://www.cnblogs.com/Ao-min/p/14685196.html