如何将路由参数传递至另一路由以获取数据？订单号提交跳转实现咨询

看起来你已经搞定了最关键的参数传递环节，接下来咱们把剩下的页面跳转和订单数据获取部分补上就行！我分前端、后端两个核心环节给你梳理清楚：

前端：处理提交后的页面跳转 #

不管你用原生JS还是前端框架，核心逻辑都是完成POST请求后，带着订单号跳转到详情页面。这里给你两种常见场景的示例：

原生HTML+JS场景 #

<form id="orderForm">
  <input type="text" id="orderNum" name="orderNum" placeholder="输入订单号" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('orderForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认表单提交，避免页面刷新
  const orderNum = document.getElementById('orderNum').value;
  
  // 执行你已经实现的POST请求
  await fetch('/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ orderNum }),
  });
  
  // 跳转到详情页，用URL参数传递订单号（注意用encodeURIComponent处理特殊字符）
  window.location.href = `/order-details?orderNum=${encodeURIComponent(orderNum)}`;
});
</script>

React框架场景（用react-router） #

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function OrderInput() {
  const navigate = useNavigate();
  const [orderNum, setOrderNum] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 执行你的POST请求
    await fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ orderNum }),
    });
    // 跳转到详情页并携带参数
    navigate(`/order-details?orderNum=${encodeURIComponent(orderNum)}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={orderNum}
        onChange={(e) => setOrderNum(e.target.value)}
        placeholder="输入订单号"
        required
      />
      <button type="submit">提交</button>
    </form>
  );
}

后端：接收参数并获取订单字段 #

这里以Node.js/Express为例，展示如何处理详情页路由、查询订单数据并渲染页面：

const express = require('express');
const router = express.Router();
// 导入你的数据库连接模块（比如MySQL、MongoDB）
const db = require('./db-connection');

// 订单详情页路由
router.get('/order-details', async (req, res) => {
  try {
    const orderNum = req.query.orderNum;
    // 先校验参数是否存在
    if (!orderNum) {
      return res.status(400).send('请提供有效的订单号');
    }

    // 查询数据库获取对应订单数据（这里以MySQL为例，MongoDB逻辑类似）
    const [orders] = await db.query('SELECT * FROM orders WHERE order_num = ?', [orderNum]);
    
    if (orders.length === 0) {
      return res.status(404).send('未找到该订单');
    }

    // 把订单数据传递给页面模板（比如用EJS）渲染
    res.render('order-details', { order: orders[0] });
    // 如果是前后端分离项目，直接返回JSON：res.json({ order: orders[0] });
  } catch (err) {
    console.error('查询订单失败:', err);
    res.status(500).send('服务器内部错误');
  }
});

module.exports = router;

详情页面渲染（以EJS模板为例） #

在views/order-details.ejs里展示订单字段：

<!DOCTYPE html>
<html>
<head>
  <title>订单详情</title>
</head>
<body>
  <h1>订单详情</h1>
  <div class="order-info">
    <p><strong>订单号:</strong> <%= order.order_num %></p>
    <p><strong>下单时间:</strong> <%= order.created_at.toLocaleString() %></p>
    <p><strong>订单金额:</strong> ¥<%= order.amount %></p>
    <!-- 按需添加其他你需要展示的字段 -->
  </div>
</body>
</html>

额外注意事项 #

• 参数安全：用encodeURIComponent处理订单号，避免特殊字符（比如&、=）破坏URL结构
• 权限校验：如果订单是用户私有数据，记得在后端加上用户身份验证，防止他人随意查询订单
• 错误处理：一定要处理数据库查询失败、订单不存在等异常情况，给用户友好的提示

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