如何在不刷新页面的前提下将MongoDB数据传递至EJS文件

核心逻辑：放弃同步表单提交+服务端渲染返回的模式，改用异步接口传输JSON数据，前端通过JS拦截提交行为、动态更新页面内容，全程不会触发页面刷新。

后端（app.js）修改 #

替换原有POST路由逻辑，把无内容的204响应改为返回JSON格式的转换结果，补充异常容错：

// 提前在路由定义前加这行中间件，支持解析JSON请求体
app.use(express.json());

app.post("/", async (req, res) => {
  try {
    const txtareaStr = req.body.phoneticTxtArea;
    // 兼容多空格、首尾空字符的分割逻辑
    const txtareaArr = txtareaStr.trim().toLowerCase().split(/\s+/);
    const convertArrOfArrs = [];
    for (let i = 0; i < txtareaArr.length; i++) {
      const word = await Word.findOne({ phonetic: txtareaArr[i] });
      // 词库无匹配时保留原词，避免空值报错
      convertArrOfArrs.push(word ? word.converted : txtareaArr[i]);
    }
    // 返回200状态+转换结果JSON
    res.status(200).json({ convertResult: convertArrOfArrs });
  } catch (e) {
    console.log("转换错误：", e);
    res.status(500).json({ error: "服务端转换异常" });
  }
});

前端（index.ejs）修改 #

给页面元素加唯一标识，拦截表单默认提交行为，通过fetch发送异步请求，拿到结果后直接更新第二个文本域内容：

<!-- 输入区域 -->
<form id="convertForm">
  <textarea id="phoneticInput" name="phoneticTxtArea" rows="8" cols="60" placeholder="请输入要转换的内容"></textarea>
  <button type="submit">转换</button>
</form>

<!-- 结果输出区域 -->
<textarea id="convertOutput" rows="8" cols="60" readonly placeholder="转换结果将展示在这里"></textarea>

<script>
const form = document.getElementById('convertForm');
const inputArea = document.getElementById('phoneticInput');
const outputArea = document.getElementById('convertOutput');

form.addEventListener('submit', async (e) => {
  // 阻止表单默认提交跳转/刷新行为
  e.preventDefault();
  // 发送异步请求
  const response = await fetch('/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      phoneticTxtArea: inputArea.value.trim()
    })
  });
  const resData = await response.json();
  if (resData.convertResult) {
    // 扁平化转换结果数组，拼接为字符串写入输出域，要追加就把=改成+=
    outputArea.value = resData.convertResult.flat().join(' ');
  }
})
</script>

关键注意事项 #

• 原有res.status(204).send()的作用是返回无内容响应，本身无法携带任何数据，必须替换为JSON响应才能把转换结果传回前端。
• 如果需要保留每次转换的历史结果，只需要把输出域赋值逻辑从outputArea.value = 转换内容改为outputArea.value += 转换内容 + '\n'，即可实现追加效果。
• 不需要引入额外第三方依赖，原生fetch API即可实现所有无刷新交互逻辑，兼容所有现代浏览器。
• 如果你之前仅配置了express.urlencoded()表单解析中间件，和新增的express.json()中间件可以同时存在，不会产生冲突。

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