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

  • 相关阅读:
    NYOJ题目28大数阶乘
    网页小图标设置
    Sass中文乱码问题(手动编译和watch编译)
    设计模式之构建者模式(Builder):初步理解
    Struts2之类型转换器
    css设置网页文本选中样式
    由超市临时储物柜引发的一点设计随想...
    前端资源相关参考资料
    Struts2拦截器之ExceptionMappingInterceptor(异常映射拦截器)
    Struts2之OGNL
  • 原文地址:https://www.cnblogs.com/Ao-min/p/14685196.html
Copyright © 2011-2022 走看看