点击删除按钮后无需Ajax，从Node后端渲染EJS页面求助

作为Node和EJS新手，直接用表单包裹删除按钮是最容易上手的方案，完全不用复杂的AJAX或jQuery操作，步骤如下：

1. 在EJS模板里给每篇帖子添加删除表单 #

循环渲染帖子时，给每个删除按钮套一个表单，通过隐藏字段传递帖子ID，表单提交方式设为POST，提交路径指向你的/delete路由：

<% posts.forEach(post => { %>
  <div class="post-item">
    <h2><%= post.title %></h2>
    <p><%= post.content %></p>
    <!-- 删除按钮对应的表单 -->
    <form action="/delete" method="POST" style="display: inline-block;">
      <!-- 隐藏字段传递帖子ID -->
      <input type="hidden" name="postId" value="<%= post.id %>">
      <!-- 确认提示避免误删 -->
      <button type="submit" onclick="return confirm('确定要删除这篇帖子吗？')">删除</button>
    </form>
  </div>
<% }) %>

2. 后端修改/delete路由逻辑 #

之前你用res.render返回页面无效，是因为表单提交后浏览器会等待跳转，直接重定向到首页即可，这样页面会自动刷新并显示更新后的帖子列表：

// 假设你用数组存储帖子（实际项目可能用数据库）
let posts = [/* 你的帖子数据 */];

app.post('/delete', (req, res) => {
  // 获取表单提交的帖子ID
  const targetPostId = req.body.postId;
  // 过滤掉要删除的帖子
  posts = posts.filter(post => post.id !== targetPostId);
  // 重定向到首页，自动刷新页面
  res.redirect('/');
});

补充：如果想用DELETE请求（可选） #

如果想遵循REST规范用DELETE方法，需要先安装method-override中间件，配置后在表单里添加_method隐藏字段：

1. 安装中间件：npm install method-override
2. 配置Express：

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

3. 修改EJS表单：

<form action="/delete/<%= post.id %>" method="POST">
  <input type="hidden" name="_method" value="DELETE">
  <button type="submit">删除</button>
</form>

4. 后端路由改为DELETE：

app.delete('/delete/:id', (req, res) => {
  const targetPostId = req.params.id;
  posts = posts.filter(post => post.id !== targetPostId);
  res.redirect('/');
});

这个方案完全不用AJAX，逻辑简单，适合新手快速实现功能。

内容的提问来源于stack exchange，提问作者Tor