不使用ejs等工具时能否将MongoDB数据传输到HTML？如何实现？

完全可行，不需要使用ejs等服务端模板引擎的情况下，有两种成熟的实现方案，具体操作步骤如下：

方案1：静态HTML + 前端AJAX渲染（更推荐，前后端逻辑拆分清晰） #

步骤1：Express端开发JSON数据接口 #

首先确保你已经安装了MongoDB操作依赖（mongoose或官方mongodb驱动均可，以下以mongoose为例），在服务端暴露查询接口：

const express = require('express');
const app = express();
// 假设你已经完成MongoDB连接，且提前定义了存储表单数据的模型FormData
const FormData = require('./models/FormData'); 

// 托管静态资源，将后续要写的HTML文件放在项目根目录的public文件夹下
app.use(express.static('public'));

// 开发数据查询接口，返回JSON格式的表单数据
app.get('/api/form-data', async (req, res) => {
  try {
    const formList = await FormData.find(); // 查询所有表单存储数据
    res.json(formList);
  } catch (err) {
    res.status(500).json({ error: '数据查询失败' });
  }
});

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

步骤2：编写静态HTML，前端请求数据拼接列表 #

在public文件夹下新建list.html，前端通过原生JS请求接口、渲染列表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单数据列表</title>
</head>
<body>
  <h1>已提交的表单数据</h1>
  <ul id="listContainer"></ul>

  <script>
    window.onload = async () => {
      try {
        const res = await fetch('/api/form-data');
        const dataList = await res.json();
        const container = document.getElementById('listContainer');
        
        // 循环生成列表项插入DOM
        dataList.forEach(item => {
          const li = document.createElement('li');
          // 替换为你实际存储的表单字段即可
          li.textContent = `姓名：${item.username}，联系方式：${item.phone}，提交时间：${new Date(item.createTime).toLocaleString()}`;
          container.appendChild(li);
        });
      } catch (err) {
        console.error('数据加载失败：', err);
      }
    }
  </script>
</body>
</html>

配置完成后访问http://localhost:3000/list.html即可看到渲染结果。

方案2：服务端直接拼接HTML返回（适合极简场景，无需单独静态文件） #

如果不需要单独维护静态资源，也可以直接在Express接口中拼接HTML字符串返回给浏览器：

app.get('/form-list', async (req, res) => {
  try {
    const formList = await FormData.find();
    // 拼接HTML基础结构
    let htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单数据列表</title>
</head>
<body>
  <h1>已提交的表单数据</h1>
  <ul>
`;
    // 循环拼接列表项
    formList.forEach(item => {
      htmlContent += `<li>姓名：${item.username}，联系方式：${item.phone}，提交时间：${new Date(item.createTime).toLocaleString()}</li>`;
    });
    // 补全HTML结构
    htmlContent += `
  </ul>
</body>
</html>
`;
    // 设置响应类型为HTML，返回内容
    res.setHeader('Content-Type', 'text/html');
    res.send(htmlContent);
  } catch (err) {
    res.status(500).send('页面加载失败');
  }
});

配置完成后访问http://localhost:3000/form-list即可直接看到渲染结果。

注意：如果表单允许用户输入自定义内容，两种方案都需要对输出内容做XSS转义处理，避免安全风险。

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