Question

我正在使用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)">;

Answer 1

这是一个示例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放入匹配的元素中。

希望有帮助。

刷新MEN堆栈网页，而无需刷新整个页面

1 个答案: