如何通过按钮在Node.js与EJS模板中执行函数并展示结果

你遇到的核心问题是：EJS是服务器端渲染模板，渲染完成后前端拿到的是纯浏览器可执行的HTML/JS，无法直接调用运行在Node.js服务器环境的函数。必须通过「前端发起HTTP请求 → 后端路由处理并执行目标函数 → 返回结果 → 前端更新页面」的流程实现。

以下是具体实现步骤：

1. 后端新增API路由，处理前端请求 #

在你的Node.js路由文件（比如routes/generator.js或主文件app.js）中，新增一个专门处理该请求的路由，调用kaikkiController.uniqueRandomNumbers并返回结果：

// 示例：GET请求（无参数场景）
router.get('/api/random-numbers', (req, res) => {
  try {
    // 调用后端函数获取结果
    const randomNumbers = kaikkiController.uniqueRandomNumbers();
    // 以JSON格式返回给前端
    res.json({
      success: true,
      data: randomNumbers
    });
  } catch (error) {
    res.json({
      success: false,
      error: error.message
    });
  }
});

// 如果函数需要参数，改用POST请求传递参数
router.post('/api/random-numbers', (req, res) => {
  try {
    // 从请求体获取前端传递的参数
    const { count, min, max } = req.body;
    const randomNumbers = kaikkiController.uniqueRandomNumbers(count, min, max);
    res.json({
      success: true,
      data: randomNumbers
    });
  } catch (error) {
    res.json({
      success: false,
      error: error.message
    });
  }
});

2. 前端EJS页面修改：通过AJAX发起请求并更新页面 #

在generator.ejs中，删除直接调用后端函数的onclick逻辑，替换为前端JS函数，通过fetch发起请求并将结果插入占位符：

<!-- 页面上的结果占位符 -->
<div id="resultContainer"></div>

<!-- 触发按钮 -->
<button onclick="getRandomNumbers()">生成随机数</button>

<script>
async function getRandomNumbers() {
  const resultContainer = document.getElementById('resultContainer');
  try {
    // 无参数场景用GET请求
    const response = await fetch('/api/random-numbers');
    
    // 有参数场景用POST请求（需传递参数时替换上面的GET代码）
    // const response = await fetch('/api/random-numbers', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ count: 5, min: 1, max: 100 })
    // });

    const data = await response.json();
    
    if (data.success) {
      // 根据返回结果的格式，自定义展示方式（示例为数组转字符串）
      resultContainer.textContent = `生成的随机数：${data.data.join(', ')}`;
    } else {
      resultContainer.textContent = `生成失败：${data.error}`;
    }
  } catch (err) {
    resultContainer.textContent = `请求出错：${err.message}`;
  }
}
</script>

为什么原来的方法无效？ #

你之前直接把后端函数传入EJS模板，渲染后前端拿到的只是函数的字符串形式（Node.js无法将服务器端函数序列化到前端），浏览器无法执行运行在服务器环境的代码，自然无法获取结果。必须通过HTTP请求完成前后端的交互。

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