我正在使用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代码,刷新部分页面像一些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放入匹配的元素中。
希望能帮助到你。