定时刷新table获取数据

最新推荐文章于 2024-08-06 10:50:52 发布

灰灰童鞋

最新推荐文章于 2024-08-06 10:50:52 发布

阅读量1.1w

点赞数 1

分类专栏： ajax 文章标签： js定时器 ajax

本文链接：https://blog.csdn.net/hxh_huihui/article/details/79459123

版权

这篇博客讲述了如何使用js定时器和ajax技术来实现在前端页面上每10秒自动刷新table数据，从而避免刷新整个浏览器导致的不佳用户体验。作者首先排除了使用velocity模板语言进行全页面刷新的方案，转而采用js定时器配合ajax异步请求的方式，定时从后端接口获取更新的数据并加载到table中。文中还给出了velocity模板、ajax请求以及控制器的部分代码示例，并介绍了js定时器的setInterval和setTimeout两种方法。

摘要由CSDN通过智能技术生成

这是第一篇博客，从这里开始，我将记录我遇到的各种编程问题，大大小小，以此慢慢记录。

前两天，一同事需要我帮忙写一段小代码，前端界面用velocity模板处理，通过ajax调用后端接口，重点是要10秒进行一次刷新，界面显示的是table列表。不难，要么就是直接用velocity模板语言循环遍历对象获取数据，js写一个10定时器刷新界面，但是这样一来要刷新整个浏览器，体验不好也不太符合需求；或许有更好的方法，但这里采取的是另一种方法，直接通过js方法写一个定时器，定时器调用ajax的异步方法，再把数据加载到界面上。

先写一个题外话，velocity模板语言循环遍历对象获取数据代码：

<table class="table table-hover">
    <thead class="table-header">
        <th>事件编号</th>
        <th>事件类型</th>
        <th>应答码</th>
        <th>事件状态</th>
        <th>请求时间</th>
        <th>应答时间</th>
    </thead>
    <tbody>
        #foreach($l in $list)
            <tr>
                <td>$l.get("evenId")</td>
                <td>