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

最新推荐文章于 2024-06-19 11:25:09 发布
最新推荐文章于 2024-06-19 11:25:09 发布
阅读量2.3w 收藏 49
点赞数 9
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39188306/article/details/88600665
版权

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);
            }
        }
    })
}

 

IT-Andy
关注
  • 9
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax定时发送请求每5秒调用一次
css兼容浏览器的各种背景渐变
08-17 1993
ajax的定时调用每5秒调用一次； xunhuan() function xunhuan(){ $.ajax({ url: "http://localhost/data/text.json", type: 'post', dataType: 'json', data: { }, success: function (r) { var addata = r.data.paperList
js 每隔 10 秒钟 运行一次，发送一个 ajax 请求
热门推荐
tfish的专栏
08-10 1万+
// 每隔 10 秒钟 运行一次，发送一个 ajax 请求 function runEvery10Sec() { // 1000 * 10 = 10 秒钟 setTimeout( runEvery10Sec, 1000 * 10 ); // $.ajax( { "dataType" : 'json', "type" ...
JavaScript之Ajax
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-19 1043
JavaScript之Ajax
js页面定时执行ajax
weixin_38841970的博客
08-27 2459
定时 setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() ：在指定的毫秒数后调用函数或计算表达式。 公式为 setInterval(code,millisec,lang) 参数 描述 code 必需。要调用的函数或要执行的代码串 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 lang 可选。 JScript 、
AJAX教程系列五：异步数据获取与定时器
Star
07-08 630
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="ajax.js"></script> <script> window.onload = function() { var oBtn
js采用ajax发送请求获取数据（实例操作）
weixin_47701835的博客
08-28 1万+
来，案例之前，容我分享一下js如何发送请求。 原生js发送请求： let xhr= new XMLHttpRequest(); // methods：GET/POST请求方式等，url：请求地址，true异步（可为false同步） xhr.open("methods","url" ,true); xhr.send(); // 发送 xhr.onreadystatechange = function() {
【vue+element-ui】前端实现轮询
Y_hhya的博客
12-21 3041
- 需求 在管理系统中实现前端每隔5秒调用后端的轮询接口，进行轮询。 - 实现 this.timer=window.setInterval(() => { setTimeout(() => { api.setControlResult(id).then((res) => { if (res.data.code == '500') {
js定时器+ajax，间隔10s调用一次
06-18
主要用于消息提醒，利用js页面定时器，定时提交ajax请求，查询最新的消息记录。改了很多次，终于成功了。
jquery 通过ajax请求获取后台数据显示在表格上的方法
10-18
今天小编就为大家分享一篇jquery 通过ajax请求获取后台数据显示在表格上的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery中ajax请求后台返回json数据并渲染HTML的方法
12-29
<input type=text name=dishes value= class=seek_product placeholder=请输入菜名/> <button type='button' class=btn_nor onclick=seek_product()>搜索</button>...th width=70%
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
10-28
总结来说，这段代码利用 jQuery 和 AJAX 实现了一个每秒向后台 `userfriend.ashx` 发送 GET 请求的功能，并将返回的数据实时显示在页面的 `#sp1` 元素中。这样的设计常用于实时数据显示，如股票报价、在线聊天等需要...
js每隔5分钟执行一次ajax请求的实现方法
12-10
一个页面好像只能有一个 [removed]=function(){}，所以要有多个事件，这样写就好了 代码如下: [removed]=function(){ //假设这里每个五分钟执行一次test函数 publicBusi(); personBusi(); } function publicBusi(){ setTimeout(personBusi,1000*60*7);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共7分钟 $.post(‘${basePath}/approval/toCheckPublicBusi’,function(data){ if
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
01-21
先看下面一段代码： DiGui = function (param) { $.ajax({ success: function (returnValue) { window.setInterval(fnSetMarkPoint(), 5000); } }); 调用DiGui()方法后 问题： 每隔0.1秒创建一个setInterval,成一个树形的方式循环创建setInterval,直到页面崩溃 解决思路： 保证setInterval对象只创建一次 实现方案： 定一个布尔变量进行判断 var status= true; var status = true; DiGui = fu
jQuery Ajax请求后台数据并在前台接收
10-20
需要特别注意的是，如果后台需要返回的数据不是JSON对象，而是一个List对象，那么在前端的Ajax请求的成功回调函数中，可以通过data[0]这样的索引方式来访问数据。不过，推荐使用JSON对象传递数据，因为这样更加直观...
利用jQuery Ajax技术实现每隔5秒向某页面传值
Cowboy
07-27 6281
有时候我们需要每隔一段时间向某页面传值，比如说聊天室，每隔几秒就像数据库处理页面传值并取回，然后显示在聊天窗口。又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟，如果是则将用户退出。这个时候我们就要用到HTML DOM setInterval() 方法。 jQuery Ajax技术学习 https://www.itkc8.com   setInterval() 方法可按照指定的周...
原生js实现的ajax请求
weixin_44021888的博客
05-25 408
原生js发送ajax请求
ajax每隔5秒更新数据_精讲网页数据实时刷新实现
weixin_39821189的博客
11-27 2382
本文仅为学技术而简单举例，后端框架是Django，具体业务逻辑是否合理可以不用管，下方是工作中需要实现的需求自动化程序脚本运行的三种任务状态：1、未执行 2、执行成功 3、执行失败任务状态在网页前端实时展示，需要每隔一段时间请求数据库中的状态数据字段为webtask_stu，并返回前端展示两种思路：1、前端轮询，每请求一次，建立一次连接，后端返回前端数据一次具体实现：设置定时器，...
jq 3秒倒计时调用接口
Cc
06-18 414
ajax设置定时请求第一次到页面没数据，第二次请求才有数据解决
小橘是橘子的博客
10-31 962
ajax请求后台数据，第一次请求获取不到结果，第二次请求才有返回结果
在jQuery中，如何使用AJAX发送一个GET请求
06-10
在jQuery中，可以使用`$.ajax()`方法发送一个GET请求。 以下是一个基本的示例代码： ```js $.ajax({ url: 'url/to/resource', type: 'GET', success: function(data) { console.log('Request successful!'); console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { console.log('Error making request!'); console.log(textStatus); } }); ``` 在上面的示例代码中，`url`属性指定了要请求的资源的URL。`type`属性指定了请求的类型，这里是GET请求。`success`属性是一个回调函数，当请求成功时被调用。它的参数`data`是服务器返回的数据。`error`属性也是一个回调函数，当请求失败时被调用。它的参数`jqXHR`是一个XMLHttpRequest对象，`textStatus`是一个字符串，表示错误的类型，`errorThrown`是一个JavaScript Error对象，表示请求失败的原因。可以根据需要在这些回调函数中执行一些操作。 另外，如果只是想简单地发送一个GET请求，可以使用`$.get()`方法。例如： ```js $.get('url/to/resource', function(data) { console.log('Request successful!'); console.log(data); }); ``` 在上面的示例代码中，`$.get()`方法只需要指定要请求的URL和请求完成后的回调函数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值