使用原生JavaScript实现点击按钮跳转并传递产品数据至购买页

我有一个产品页面，包含带10张图片的轮播图库，同时展示配送信息、客户评价等产品详情，页面下方设有Buy按钮供用户购买当前产品。页面展示的数据通过Ajax请求从JSON文件获取。

需要实现：点击按钮后跳转至Purchase Page，让用户在该页面查看选中产品的image和product info。要求用原生JavaScript实现，点击按钮时替换购买页的商品详情。

原有代码的问题 #

你提供的代码逻辑有误：当执行location.href = '/purchase.html'后，当前页面的JavaScript会立即停止执行，后续操作购买页DOM的代码根本不会运行——因为跳转后当前页面的上下文已经销毁，无法访问新打开页面的元素。

解决方案 #

核心思路 #

1. 产品页点击按钮时，将当前产品的唯一标识（如ID）通过URL参数传递给购买页
2. 购买页加载完成后，读取URL参数中的产品标识，通过Ajax获取对应产品数据，再渲染到页面上

产品页代码 #

HTML

<button class="buy_bttn" type="button">Buy</button>
<!-- 隐藏域存储当前产品ID，可根据实际情况从轮播/产品数据中动态赋值 -->
<input type="hidden" id="current_product_id" value="product_001">

JavaScript

// 假设已通过Ajax获取全局产品数据data，此处绑定按钮点击事件
document.querySelector('.buy_bttn').addEventListener('click', () => {
  const productId = document.getElementById('current_product_id').value;
  // 跳转时携带产品ID参数
  location.href = `/purchase.html?pid=${productId}`;
});

购买页代码 #

HTML

<div id="purchase_item_image">
  <img src="" id="purchase_image" alt="选中产品图片" />
</div>
<div id="purchasing_product_info">
  <!-- 产品详情将在这里渲染 -->
</div>

JavaScript

window.addEventListener('load', () => {
  // 解析URL参数获取产品ID
  const urlParams = new URLSearchParams(window.location.search);
  const productId = urlParams.get('pid');

  if (!productId) {
    document.getElementById('purchasing_product_info').innerHTML = '<p>请先选择产品</p>';
    return;
  }

  // 从JSON文件加载产品数据
  fetch('products.json')
    .then(res => res.json())
    .then(products => {
      // 根据ID找到对应产品
      const targetProduct = products.find(item => item.id === productId);
      
      if (!targetProduct) {
        document.getElementById('purchasing_product_info').innerHTML = '<p>产品不存在</p>';
        return;
      }

      // 渲染产品图片和信息
      document.getElementById('purchase_image').src = `images/${targetProduct.image_path}`;
      document.getElementById('purchasing_product_info').innerHTML = `<p>${targetProduct.product_description}</p>`;
    })
    .catch(err => {
      console.error('加载产品数据失败:', err);
      document.getElementById('purchasing_product_info').innerHTML = '<p>加载产品信息失败，请稍后重试</p>';
    });
});

补充说明 #

• 确保products.json中每个产品包含id、image_path、product_description字段，示例JSON结构：

[
  {
    "id": "product_001",
    "image_path": "product1.jpg",
    "product_description": "这是产品1的详细描述"
  }
]

• 如果产品数据已在产品页获取，也可使用sessionStorage存储产品信息，购买页直接读取，避免重复请求JSON文件。

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