如何获取用户所选各类型门票数量并传递至支付页展示汇总

我来给你梳理几个简单可行的前端方案，你可以根据项目实际情况挑选：

第一步：在赛事详情页收集用户的门票选择数据 #

首先要在用户点击「Buy」按钮时，把选中的门票类型、数量、单价等信息整理成结构化数据（比如数组或对象）。

假设你的赛事详情页HTML结构是这样的（每个门票类型对应选择框和隐藏的单价标识）：

<!-- 赛事详情页的门票选择区域 -->
<div class="ticket-item">
  <label>Center:</label>
  <select class="quantity-picker" data-ticket-type="center" data-unit-price="100">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>
<div class="ticket-item">
  <label>Left:</label>
  <select class="quantity-picker" data-ticket-type="left" data-unit-price="50">
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
</div>
<div class="ticket-item">
  <label>Right:</label>
  <select class="quantity-picker" data-ticket-type="right" data-unit-price="50">
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
</div>
<button id="buyBtn">Buy</button>

用JavaScript收集选中数据的代码示例：

document.getElementById('buyBtn').addEventListener('click', function() {
  const selectedTickets = [];
  // 遍历所有门票选择框，筛选出数量大于0的选项
  document.querySelectorAll('.quantity-picker').forEach(select => {
    const quantity = parseInt(select.value);
    if (quantity > 0) {
      const type = select.dataset.ticketType;
      const price = parseInt(select.dataset.unitPrice);
      const subtotal = quantity * price;
      selectedTickets.push({ type, quantity, price, subtotal });
    }
  });

  // 计算订单总金额
  const totalAmount = selectedTickets.reduce((sum, ticket) => sum + ticket.subtotal, 0);
  
  // 接下来把数据传递到支付页，下面讲几种常用传递方式
});

第二步：将数据传递到支付页 #

这里提供3种前端常用的传递方式：

方式1：用SessionStorage传递（推荐，适合临时订单数据） #

SessionStorage是浏览器临时存储，关闭标签页就会清空，刚好适配这种一次性的订单数据传递：

// 在Buy按钮的点击事件中添加：
sessionStorage.setItem('ticketOrder', JSON.stringify({ tickets: selectedTickets, total: totalAmount }));
// 跳转到支付页
window.location.href = '/payment.html';

方式2：用URL参数传递（适合数据量小、非敏感场景） #

如果数据不多，可以把数据转成URL参数拼接跳转：

// 把数据转成URL编码的参数
const params = new URLSearchParams();
params.append('ticketData', JSON.stringify(selectedTickets));
params.append('total', totalAmount);
// 跳转至支付页
window.location.href = `/payment.html?${params.toString()}`;

方式3：用表单POST提交（适合后端渲染页面的场景） #

如果你的页面是后端生成的，可以用隐藏表单提交数据：

<!-- 在赛事详情页添加隐藏表单 -->
<form id="ticketForm" action="/payment" method="POST">
  <input type="hidden" name="orderData" id="orderDataInput">
</form>

然后在JavaScript中赋值并提交：

document.getElementById('orderDataInput').value = JSON.stringify({ tickets: selectedTickets, total: totalAmount });
document.getElementById('ticketForm').submit();

第三步：在支付页读取数据并渲染汇总表格 #

拿到传递过来的数据后，就可以动态生成你需要的汇总表格了。

以SessionStorage传递为例，支付页的JavaScript代码：

window.addEventListener('load', function() {
  // 读取存储的订单数据
  const storedOrder = sessionStorage.getItem('ticketOrder');
  if (!storedOrder) {
    // 如果没有数据，说明用户直接访问支付页，跳回赛事详情页
    window.location.href = '/event-detail.html';
    return;
  }
  const { tickets, total } = JSON.parse(storedOrder);

  // 获取表格容器，假设支付页有如下表格结构
  const table = document.getElementById('ticketSummary');
  const tbody = table.querySelector('tbody');

  // 渲染每一行门票数据
  tickets.forEach(ticket => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${ticket.type}</td>
      <td>${ticket.quantity}</td>
      <td>${ticket.price}$</td>
      <td>${ticket.subtotal}$</td>
    `;
    tbody.appendChild(row);
  });

  // 渲染总计行
  const totalRow = document.createElement('tr');
  totalRow.innerHTML = `
    <td colspan="3"><strong>Total</strong></td>
    <td><strong>${total}$</strong></td>
  `;
  tbody.appendChild(totalRow);

  // 可选：读完数据后清除SessionStorage，避免用户刷新页面重复显示旧数据
  sessionStorage.removeItem('ticketOrder');
});

对应的支付页HTML表格结构：

<table id="ticketSummary" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Type</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Subtotal</th>
    </tr>
  </thead>
  <tbody>
    <!-- JavaScript会在这里动态插入行 -->
  </tbody>
</table>

这样就能完美实现你要的效果：用户在赛事详情页选的门票信息会准确传递到支付页，并展示成你需要的汇总表格。

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