• 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

  • 相关阅读:
    SpringMVC什么时候配置 视图解析器
    打印数组的5种方式
    集合区别(list和linkedlist的区别)?
    回归测试
    dom4j组装xml 以及解析xml
    java操作文件创建、删除
    powerdesigner里的table背景色是不是可以修改的?
    如何设定editplus为txt默认打开程序?
    PowerDesigner怎样才能在修改表的字段Name的时候Code不自动跟着变
    PowerDesigner怎么调出工具箱?
  • 原文地址:https://www.cnblogs.com/Ao-min/p/14685196.html
Copyright © 2020-2023  润新知