我有一个 EJS 模板,它从服务器获取文件 userData。
如何实现模板中userData的刷新而不需要重新加载页面?
我已成功在应用程序的其他部分中通过 Ajax post 方法将数据提交到服务器,而无需重新加载页面。
但找不到在模板中呈现更新数据而无需重新加载页面的方法。
EJS 模板
当浏览器访问 URL
/tasks
此代码片段只是应用程序的一部分,用于演示结构。
<%userData.forEach(function(project){%>
<div class="project">
<div class="projectHeader">
<div class="projectTitle">
<span>
<a data-toggle="modal" data-target="#editDeadLineModal">
<i id="setListDeadline" data-id="<%=project.id%>" class="far fa-calendar-alt fa-2x" data-toggle="tooltip" data-placement="top" title="Set Deadline"></i>
</a>
</span>
<%if(project.deadline == null){%>
<h5 class="projectName"><%=project.name%></h5>
<%}else{%>
<% var deadline = project.deadline.toDateString()%>
<h5 data-toggle="tooltip" data-placement="top" title="Deadline <%=deadline%>" style="align-items: center;" class="projectName">
<%=project.name%>
</h5>
<%}%>
</div>
</div>
</div>
我使用 forEach 循环来获取文件中的每个
project
并将其呈现在 <div class="project">
中,因此页面会填充与 userData
中一样多的对象。
userData
包含:
project.id
project.name
project.deadline
例如我更改了
project.name
并通过Ajax post方法将新数据提交到服务器。
我知道它已保存 - 因为在查询执行后记录为“新数据已保存”。
这是我的 GET 方法。
到达 URL 后,查询数据库中的所有
projects
并将它们发送到模板。
app.get("/tasks", async (req, res) => {
const results = await pool.query(`SELECT * FROM projects`);
res.render("tasks", {
userData: results,
})
})
我认为是 res.update('page.ejs', {dataToUpdate})