GET请求后无法跳转EJS页面的技术问题咨询

听起来你已经搞定了外部API请求的核心部分，卡在页面跳转/结果展示这一步了对吧？我来分享几个常见的解决方向，帮你打通这个环节：

1. 确认后端路由是否正确处理渲染跳转 #

如果你的目标是跳转到服务器端渲染的新EJS页面，那Node.js后端（比如用Express）需要专门写一个路由，在获取外部数据后直接渲染目标页面，而不是只返回数据。举个例子：

// Express后端路由示例
const express = require('express');
const router = express.Router();
const fetch = require('node-fetch'); // 或者用axios，确保已安装依赖

// 处理前端的请求（假设前端用POST提交输入，GET请求则用req.query.input）
router.post('/get-results', async (req, res) => {
  try {
    // 获取用户输入
    const userInput = req.body.userInput;
    // 调用外部API，注意对参数做编码处理避免乱码
    const externalRes = await fetch(`https://你的目标外部URL?param=${encodeURIComponent(userInput)}`);
    const tableData = await externalRes.json();
    
    // 关键：渲染新的EJS页面，并把数据传递给模板
    res.render('results', { tableData: tableData });
  } catch (err) {
    console.error('请求外部API出错:', err);
    res.status(500).send('服务器出错，请稍后重试');
  }
});

这里要注意：res.render('results')里的results是你存放在views目录下的EJS文件名（比如results.ejs），必须确保这个文件存在且路径配置正确。

2. 检查前端提交方式是否触发了页面跳转 #

很多时候页面不跳转，是因为前端用了AJAX/fetch异步请求——这种请求默认只会在后台获取数据，不会触发浏览器的页面跳转。你有两个选择：

选项A：改用传统表单提交（最简单的服务器端渲染跳转） #

如果不需要异步交互的额外逻辑（比如实时验证），直接用HTML表单提交，浏览器会自动跳转到路由对应的页面：

<!-- 前端EJS页面的表单 -->
<form action="/get-results" method="POST">
  <input type="text" name="userInput" placeholder="输入你的查询内容">
  <button type="submit">查询并查看结果</button>
</form>

这种方式不需要写额外的JS，点击按钮后浏览器会发送请求，后端渲染results.ejs并返回，自动完成跳转。

选项B：保持AJAX，但手动触发跳转 #

如果需要保留异步请求的逻辑（比如提交前做输入校验），那在请求成功后，你可以手动让浏览器跳转：

// 前端JS示例
document.getElementById('submit-btn').addEventListener('click', async () => {
  const input = document.getElementById('user-input').value;
  
  // 先做输入验证
  if (!input.trim()) {
    alert('请输入查询内容');
    return;
  }
  
  // 发送异步请求
  const res = await fetch(`/api/fetch-data?input=${encodeURIComponent(input)}`);
  const data = await res.json();
  
  // 方式1：通过URL参数传递数据（适合数据量小的场景）
  window.location.href = `/results?data=${encodeURIComponent(JSON.stringify(data))}`;
  
  // 方式2：先把数据存在localStorage，再跳转
  localStorage.setItem('tableData', JSON.stringify(data));
  window.location.href = '/results';
});

如果用方式2，别忘了在results.ejs里读取localStorage的数据来生成表格：

<script>
  const tableData = JSON.parse(localStorage.getItem('tableData'));
  // 动态生成表格的逻辑...
</script>

3. 确保结果页EJS能正确解析数据生成表格 #

最后一步，要确认你的results.ejs能正确接收后端传的tableData，并渲染成表格。举个简单的模板示例：

<!-- results.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>查询结果</title>
  <style>
    table { border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h2>你的查询结果</h2>
  <% if (tableData && tableData.length > 0) { %>
    <table>
      <thead>
        <tr>
          <!-- 自动生成表头（假设数据是数组对象） -->
          <% Object.keys(tableData[0]).forEach(key => { %>
            <th><%= key %></th>
          <% }) %>
        </tr>
      </thead>
      <tbody>
        <% tableData.forEach(item => { %>
          <tr>
            <% Object.values(item).forEach(value => { %>
              <td><%= value %></td>
            <% }) %>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } else { %>
    <p>没有找到相关数据</p>
  <% } %>
</body>
</html>

先从检查后端路由的渲染逻辑开始，再确认前端的提交方式是否匹配，应该就能解决页面不跳转的问题啦！

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