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