刷新MEN堆栈网页而不刷新整个页面

问题描述 投票:0回答:1

我正在使用MEN堆栈创建数据分析仪表板。 (express,node,ejs)但是,我想显示每5秒刷新一次的实时数据,而不刷新当前使用以下脚本的HTML页面。

一切正常。但是,看到页面一直在刷新,这是一种眼睛。有没有办法使用AJAX或其他东西来刷新特定的DIV或PAGE?我在不同的地方尝试了不同的AJAX功能,但它不起作用。也许我做错了。有什么建议?

async showTasksMain(req, res) {
const queryWeather = "SELECT * FROM c ORDER BY c.EventProcessedUtcTime desc"

const items = await this.taskDao.findweather(queryWeather); //Return variables
const tempdata = await this.taskDao.findtempdata(queryWeather);

res.render("index",{items:items, tempdata:tempdata});
}
async findweather(queryWeather) {
debug("Querying for items from the database");
if (!this.container) {
throw new Error("Collection is not initialized.");
}

const { result: results } = await this.container.items
.query(queryWeather)
.toArray();

var obj = results[0];
return obj;
}
app.get("/", (req, res, next) => taskList.showTasksMain(req, res).catch(next));
  <script type = "text/JavaScript">
        function AutoRefresh( t ) {
           setTimeout("location.reload(true);", t);
        }
  </script>

<body onload="JavaScript:AutoRefresh(30000)">;
javascript ajax express azure-cosmosdb
1个回答
0
投票

这是一个示例javascript代码,刷新部分页面像一些div

假设你有像beloe这样的菜单:

ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

你有内容div如下:

<div id="content"></div>

然后你可以编写类似的代码:

$("#menu li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        // do something after content has been loaded
    });
});

你可以参考Load

从服务器加载数据并将返回的HTML放入匹配的元素中。

希望能帮助到你。

© www.soinside.com 2019 - 2024. All rights reserved.