如何在jQuery POST请求后重新渲染EJS模板（Node.js+Express环境）

嘿，我明白你的需求啦——点击页面按钮发起POST请求后，用新数据重新渲染当前的EJS模板对吧？我给你整理了一套简化后的完整实现方案，分前后端两部分，你可以直接参考：

1. 后端（Express+EJS）配置与路由 #

首先确保你已经安装了必要依赖：npm install express ejs body-parser

下面是后端核心代码（比如app.js）：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 配置EJS作为视图引擎
app.set('view engine', 'ejs');
app.set('views', './views'); // 指定你的EJS模板存放目录

// 解析POST请求的表单/JSON数据
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 模拟初始数据（实际项目替换为数据库查询）
let currentData = {
  listItems: ['示例项1', '示例项2', '示例项3']
};

// 初始路由：渲染页面
app.get('/', (req, res) => {
  res.render('main', currentData);
});

// 处理POST请求的路由：更新数据并重新渲染模板
app.post('/refresh-data', (req, res) => {
  // 这里替换成你的业务逻辑（比如SQL查询获取新数据），示例用模拟数据
  const newItem = req.body.customItem || `新增项${Date.now()}`;
  const updatedData = {
    listItems: [...currentData.listItems, newItem]
  };
  currentData = updatedData; // 实际项目建议用数据库持久化数据

  // 重新渲染模板，返回渲染后的HTML字符串
  res.render('main', updatedData);
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

2. 前端EJS模板（views/main.ejs） #

模板里包含交互按钮、数据展示区，以及jQuery的POST请求逻辑：

<!DOCTYPE html>
<html>
<head>
  <title>EJS重新渲染示例</title>
  <!-- 引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
  <h2>我的数据列表</h2>
  <div id="data-container">
    <ul>
      <% listItems.forEach(item => { %>
        <li><%= item %></li>
      <% }) %>
    </ul>
  </div>

  <button id="refresh-btn">点击刷新数据</button>

  <script>
    $(document).ready(() => {
      $('#refresh-btn').click(() => {
        // 发起POST请求，可携带自定义参数
        $.post('/refresh-data', { customItem: '自定义新增项' }, (responseHtml) => {
          // 方式1：替换整个页面内容
          // $('body').html(responseHtml);

          // 方式2：只替换需要更新的区域（体验更优）
          const newContent = $(responseHtml).find('#data-container').html();
          $('#data-container').html(newContent);
        })
        .fail((err) => {
          console.error('请求出错:', err);
          alert('数据更新失败，请重试');
        });
      });
    });
  </script>
</body>
</html>

关键注意事项 #

• 服务器端渲染核心：因为EJS是服务器端模板引擎，所以POST请求后让后端重新渲染模板并返回HTML，是最贴合你需求的方式，不需要前端再处理模板渲染逻辑。
• 局部更新优化：如果不想替换整个页面，像示例里的方式2那样，提取返回HTML中需要更新的区域进行替换，能获得更好的用户体验。
• 数据持久化：示例用全局变量存数据仅作演示，实际项目一定要用数据库（MySQL、MongoDB等）来存储和读取数据，避免服务器重启后数据丢失。
• 错误处理：实际开发中记得加上请求失败的处理逻辑，避免用户无感知的出错情况。

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