如何在Fetch提交表单时在EJS中获取全局错误变量

场景1：提交后无刷新显示错误 #

页面未刷新时EJS模板已完成渲染，无法直接修改EJS的errors变量，直接通过前端JS处理后端返回的JSON错误即可：

• 后端调整：验证失败时返回JSON格式错误，设置错误状态码：

// 项目提交路由示例
app.post('/projects', async (req, res) => {
  try {
    await Project.create(req.body);
    res.json({ success: true, redirect: '/projects' });
  } catch (e) {
    res.status(400).json({ errors: e.errors });
  }
});

• 前端Fetch处理：捕获错误响应后，动态渲染到页面的错误容器中：

document.querySelector('#project-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  try {
    const response = await fetch('/projects', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();

    if (!response.ok) {
      const errorContainer = document.querySelector('#error-container');
      errorContainer.innerHTML = '';
      // 遍历错误并生成提示元素
      Object.values(data.errors).forEach(err => {
        const errEl = document.createElement('div');
        errEl.className = 'error-message';
        errEl.textContent = err.message;
        errorContainer.appendChild(errEl);
      });
      return;
    }

    window.location.href = data.redirect;
  } catch (err) {
    console.error('提交失败:', err);
  }
});

• EJS视图准备：添加错误容器用于动态展示错误：

<form id="project-form" enctype="multipart/form-data">
  <!-- 表单字段 -->
  <div id="error-container" class="errors"></div>
  <button type="submit">提交</button>
</form>

场景2：提交后刷新页面显示错误 #

借助Session暂存错误，刷新后后端将错误传递给EJS视图：

• 配置Session中间件：确保Express已启用express-session：

const session = require('express-session');
app.use(session({
  secret: 'your-custom-secret',
  resave: false,
  saveUninitialized: false,
  cookie: { maxAge: 60000 } // 错误缓存1分钟
}));

• 后端路由调整：错误时将信息存入Session，返回重定向指令；GET页面时取出错误并清空Session：

// 处理POST提交
app.post('/projects', async (req, res) => {
  try {
    await Project.create(req.body);
    res.json({ success: true, redirect: '/projects' });
  } catch (e) {
    req.session.errors = e.errors;
    await req.session.save();
    res.status(400).json({ success: false, redirect: '/projects/new' });
  }
});

// 渲染表单页面
app.get('/projects/new', (req, res) => {
  const errors = req.session.errors;
  req.session.errors = null; // 清空错误，避免重复展示
  res.render('pages/projects/projects', { errors });
});

• 前端Fetch处理：收到重定向指令后跳转页面，由后端渲染带错误的视图：

document.querySelector('#project-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  try {
    const response = await fetch('/projects', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();

    window.location.href = data.redirect;
  } catch (err) {
    console.error('提交失败:', err);
  }
});

• EJS视图保持原有逻辑：继续使用原有的错误渲染代码即可：

<% if (errors) { %>
  <div class="errors">
    <% Object.values(errors).forEach(err => { %>
      <div class="error-message"><%= err.message %></div>
    <% }) %>
  </div>
<% } %>

<form id="project-form" enctype="multipart/form-data">
  <!-- 表单字段 -->
  <button type="submit">提交</button>
</form>

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