zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [国家集训队]拉拉队排练 Manancher_前缀和_快速幂
    高手过愚人节 Manancher模板题_双倍经验
    [模板]manacher算法
    [POI2011]MET-Meteors 整体二分_树状数组_卡常
    [国家集训队]矩阵乘法 整体二分
    三维偏序(陌上花开) CDQ分治
    博客园美化之旅第一天(CSS图层关系,背景相关设置,字体相关设置)
    力扣题目解答自我总结(反转类题目)
    python插件,pycharm基本用法,markdown文本编写,jupyter notebook的基本操作汇总
    关于小程序websocket全套解决方案,Nginx代理wss
  • 原文地址:https://www.cnblogs.com/Ao-min/p/14685196.html
Copyright © 2011-2022 走看看