对 postgres 数据库条目添加执行 JavaScript 页面刷新

Question

我有一个 Spring 网络应用程序，其中每 10 秒向数据库添加一次条目。我希望我的页面在新条目添加到数据库时自动重新加载。到目前为止，我想出了这样的代码：

function contentRefresh() {
$.ajax({
    url: "/refresh",
    success: function(data) {
        console.log(data);
         $("#main-content").html(data);
        }
});
}

控制器返回的数据是html片段：

@RequestMapping("/refresh")
public String refreshPage(Model model, Pageable pageable){

    PageWrapper<NetworkHashrate> page = new PageWrapper<NetworkHashrate>(netService.getAllNetworks(pageable), "");

    model.addAttribute("page", page);
    model.addAttribute("networkHashrates", page.getContent());

    return "main :: table-content";
}

还有一个包含刷新片段的 .html：

<div class="table-responsive" id="main-content" th:fragment="table-content">
                    <table class="table table-hover ">

                        <thead class="thead-inverse">
                        <tr>
                            <th class="col-md-2 text-center">Network Id</th>
                            <th class="col-md-2 text-center">Rep_date</th>
                            <th class="col-md-2 text-center">Hashrate</th>
                        </tr>
                        </thead>

                        <tr style="cursor: pointer;" th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                            <td class="text-center" th:text="${networkHashrate.id}"> Sample id</td>
                            <td class="text-center" th:text="${networkHashrate.rep_date}">Sample rep-date</td>
                            <td class="text-center" th:text="${networkHashrate.hashrate}">Sample hashrate</td>
                            </td>
                        </tr>

                    </table>

                    <button type="button" class="btn btn-success" th:onclick="'javascript:contentRefresh();'">Refresh!</button>

                        <div class="text-center" id="stat">
                            <div class="pagination"><p>Displaying <span class="badge" th:text="${page.size * (page.number-1) + 1}"></span> -
                                <span class="badge" th:text="${page.lastPage ? page.totalElements : page.size * (page.number-1)+ page.size}"></span> of
                                <span class="badge" th:text="${page.totalElements}"></span> total records</p>
                            </div>
                        </div>

                </div>

早些时候，我一直通过 <meta http-equiv="refresh" content="60" /> 刷新页面...但我被告知这是一个糟糕的方法。我已经用 button 测试了 JS 代码，它似乎可以工作，但是刷新的东西让我害怕...如何根据添加到数据库的条目刷新页面？

Answer 1

我已将 setInterval 添加到我的 JS 脚本中，例如：

setInterval("contentRefresh();", 10000 );

不是硬刷新，而是 Ajax 重新加载内容的调用，所以我想这行得通。

对 postgres 数据库条目添加执行 JavaScript 页面刷新

Execute JavaScript page refresh on postgres database entry addition

javascript

database

postgresql

spring

page-refresh