Node.js+Express+JQuery服务端POST请求及加载页实现问题

a) 方案失效的原因 #

• 服务端使用JQuery发起请求完全无效：JQuery是为浏览器环境设计的客户端库，Node.js服务端环境无法直接运行JQuery的Ajax代码，你在服务端写的请求逻辑根本不会执行。
• 客户端Ajax未触发的常见问题：
  1. 表单默认提交行为未阻止：用户提交表单时，浏览器会默认发起页面跳转，导致Ajax代码还没执行就被页面刷新中断。
  2. 依赖未正确引入：加载页的EJS模板里可能没正确引入JQuery（或使用fetch时未处理兼容性），导致JS代码报错无法执行。
  3. 接口配置错误：你定义的/request接口可能存在路由路径、请求方式或参数格式不匹配的问题，导致请求静默失败。

b) 更优实现方案 #

方案1：客户端异步提交+页面内加载状态（最简单） #

不需要单独的加载页，在原表单页面显示加载提示，用异步请求获取数据后直接更新页面，避免页面跳转的等待感。

前端EJS代码示例：

<form id="weatherForm">
  <input type="text" name="zipcode" placeholder="输入邮政编码" required>
  <button type="submit">查询温度</button>
</form>
<!-- 加载提示 -->
<div id="loading" style="display: none; color: #666;">正在获取天气数据...</div>
<!-- 结果展示区 -->
<div id="temperatureResult"></div>

<script>
  const form = document.getElementById('weatherForm');
  const loading = document.getElementById('loading');
  const result = document.getElementById('temperatureResult');

  form.addEventListener('submit', async (e) => {
    // 阻止表单默认跳转行为
    e.preventDefault();
    const zipcode = form.zipcode.value.trim();
    
    loading.style.display = 'block';
    result.innerHTML = '';

    try {
      // 异步请求后端接口
      const response = await fetch('/api/get-temperature', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `zipcode=${encodeURIComponent(zipcode)}`
      });

      if (!response.ok) throw new Error('请求失败');
      const data = await response.json();
      
      loading.style.display = 'none';
      result.innerHTML = `<h3>当前温度：${data.temperature}°C</h3>`;
    } catch (err) {
      loading.style.display = 'none';
      result.innerHTML = `<p style="color: red;">${err.message}</p>`;
    }
  });
</script>

后端app.js代码示例：

// 新增API路由处理温度请求
app.post('/api/get-temperature', async (req, res) => {
  try {
    const temperature = await getTemperatureFromZipcode(req.body.zipcode);
    res.json({ temperature });
  } catch (error) {
    res.status(500).json({ message: '获取温度失败，请重试' });
  }
});

方案2：加载页+会话存储+轮询（适合需要单独加载页的场景） #

用户提交邮编后，后端先渲染加载页，同时异步获取温度并存储到会话中，前端通过定时轮询检查状态，获取完成后展示结果。

后端依赖配置：

先安装express-session：

npm install express-session

后端app.js代码示例：

const session = require('express-session');

// 配置会话
app.use(session({
  secret: 'your-custom-secret-key', // 替换为自己的密钥
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 60000 } // 会话有效期1分钟
}));

// 处理邮编提交，跳转加载页
app.post('/submit-zip', (req, res) => {
  const zipcode = req.body.zipcode;
  // 存储邮编到会话，标记加载状态
  req.session.zipcode = zipcode;
  req.session.status = 'loading';
  req.session.temperature = null;

  // 异步获取温度，不阻塞响应
  getTemperatureFromZipcode(zipcode)
    .then(temp => {
      req.session.status = 'done';
      req.session.temperature = temp;
    })
    .catch(() => {
      req.session.status = 'error';
    });

  res.render('loading');
});

// 轮询检查状态的接口
app.get('/check-status', (req, res) => {
  const { status, temperature } = req.session;
  
  if (status === 'done') {
    // 返回结果后清理会话
    req.session.destroy();
    res.json({ done: true, temperature });
  } else if (status === 'error') {
    req.session.destroy();
    res.json({ done: true, error: '获取温度失败' });
  } else {
    res.json({ done: false });
  }
});

加载页loading.ejs代码示例：

<h2>正在获取天气数据，请稍候...</h2>
<script>
  // 定时轮询检查状态
  const checkStatus = async () => {
    const response = await fetch('/check-status');
    const data = await response.json();

    if (data.done) {
      if (data.error) {
        document.body.innerHTML = `<p style="color: red;">${data.error}</p>`;
      } else {
        // 直接在加载页渲染结果，或者跳转到结果页
        document.body.innerHTML = `<h3>当前温度：${data.temperature}°C</h3>`;
        // window.location.href = `/result?temp=${data.temperature}`;
      }
    } else {
      // 每500毫秒轮询一次
      setTimeout(checkStatus, 500);
    }
  };

  // 启动轮询
  checkStatus();
</script>

方案3：Server-Sent Events(SSE)实时推送（更高效的实时方案） #

通过SSE建立后端到前端的单向实时连接，温度获取完成后主动推送给前端，无需前端轮询。

后端app.js代码示例：

app.post('/submit-zip', (req, res) => {
  const zipcode = req.body.zipcode;
  // 渲染加载页
  res.render('loading-sse');
  
  // 异步获取温度
  getTemperatureFromZipcode(zipcode)
    .then(temp => {
      // 推送结果到所有订阅的客户端（简化实现，实际项目建议用Redis管理连接）
      if (global.sseClients) {
        global.sseClients.forEach(client => {
          client.write(`data: ${JSON.stringify({ temperature: temp })}\n\n`);
          client.end();
        });
      }
    })
    .catch(() => {
      if (global.sseClients) {
        global.sseClients.forEach(client => {
          client.write(`data: ${JSON.stringify({ error: '获取失败' })}\n\n`);
          client.end();
        });
      }
    });
});

// SSE订阅接口
app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 保存客户端连接
  if (!global.sseClients) global.sseClients = [];
  global.sseClients.push(res);

  // 客户端断开连接时清理
  req.on('close', () => {
    global.sseClients = global.sseClients.filter(client => client !== res);
  });
});

加载页loading-sse.ejs代码示例：

<h2>正在获取天气数据...</h2>
<script>
  const eventSource = new EventSource('/sse');
  
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    eventSource.close();
    if (data.error) {
      document.body.innerHTML = `<p style="color: red;">${data.error}</p>`;
    } else {
      document.body.innerHTML = `<h3>当前温度：${data.temperature}°C</h3>`;
    }
  };

  eventSource.onerror = () => {
    eventSource.close();
    document.body.innerHTML = `<p style="color: red;">连接失败，请重试</p>`;
  };
</script>

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