本文介绍如何利用 ejs 的服务端条件渲染机制，配合 express 路由逻辑，确保特定 html 内容仅在表单 post 提交后动态生成并显示，而非页面首次加载时就渲染。
本文介绍如何利用 e
js
的服务端条件渲染机制，配合 express 路由逻辑，确保特定
html
内容仅在表单 post 提交后动态生成并显示，而非页面首次加载时就渲染。
在构建基于 Node.js + Express + EJS 的 Web 应用时，常需控制页面某部分内容“仅在用户完成
表单提交
后才呈现”——例如搜索食谱后展示结果详情。这并非前端 JavaScript 的“隐藏/显示”切换，而是真正的
服务端延迟渲染（late execution）
：HTML 片段在首次 GET 请求时不参与输出，仅当 POST 请求成功处理并重新渲染模板时才被注入响应流。
核心思路是：
通过路由状态驱动 EJS 模板的条件分支
。我们引入一个布尔上下文变量（如 submitted），由服务器在不同请求方法中传入不同值，EJS 利用 <% if (submitted) { %> 语法精确控制 DOM 块的渲染时机。
✅ 正确做法（服务端条件渲染）：
? 关键服务端逻辑（Express）：
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
立即学习
“
前端免费学习笔记（深入）
”；
⚠️ 注意事项：
不要依赖纯前端 JS 控制“执行”
：<%= ... %> 是服务端执行的 EJS 表达式，无法被浏览器 JS 延迟触发；试图用 document.addEventListener('submit', ...) 动态插入 EJS 代码是无效的，因为此时服务端早已完成渲染。
避免客户端条件判断混淆
：if (submitted) 必须在 EJS 模板中作为服务端逻辑使用，而非写成 ——后者会将布尔值转为字符串 "true"/"false"，且仍属于服务端一次性输出。
数据安全
：所有用户输入（如 req.body.recipeName）应经校验与转义后再传入模板，防止 XSS；EJS 的 <%= %> 默认已做 HTML 转义，但若需渲染富文本，请改用 <%- %> 并自行净化。
用户体验增强（可选）
：如需平滑过渡，可在 EJS 中添加 CSS 类配合 transition，或结合 fetch() 实现无刷新提交（此时需改为返回 JSON 并由前端 JS 渲染，属于另一种架构，不改变本方案的服务端延迟本质）。
总结：所谓“HTML 的 late execution”，在服务端模板引擎语境下，本质是
基于请求生命周期的状态驱动渲染
。通过 Express 路由区分 GET/POST，并将业务状态（如 submitted: true）作为上下文传递给 EJS，即可精准、可靠、安全地实现内容的按需呈现。
<% if (submitted) { %>
<%= Name %>
<% Instructions.forEach(instruction => { %>
<%= instruction %>
<% }); %>
<% } %>
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.set('views', './views');
// GET：初始页面 —— submitted = false，仅渲染表单
app.get('/Recipes', (req, res) => {
res.render('recipe', { submitted: false });
});
// POST：表单提交后 —— processed data + submitted = true，渲染完整内容
app.post('/Recipes', (req, res) => {
const recipeName = req.body.recipeName || 'Default Recipe';
const instructions = [
`Fetch ingredients for ${recipeName}`,
`Preheat oven to 180°C`,
`Bake for 45 minutes`
];
res.render('recipe', {
submitted: true,
Name: recipeName,
Instructions: instructions
});
});