如何在不重新加载页面的情况下更新EJS模板数据

Question

我有一个 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,
  })
})

Answer 1

我认为是 res.update('page.ejs', {dataToUpdate})