Django中通过Javascript获取对象id实现带参数跳转至Checkout页面的方法

解决方案 #

你原有代码的核心问题有两个：

1. 行内调用redirect()时没有传递商品id，函数内部this指向的是window对象，而非当前点击的按钮元素
2. 按钮上没有存储对应商品的id属性，就算能正确获取按钮元素也读不到id值

方案1：直接传参（最简单适配你的需求） #

第一步：修改按钮的行内点击事件，把当前循环的商品id作为参数传入

<button onclick="redirect({{ item.id }})">Order</button>

第二步：修改JS函数接收参数完成跳转

function redirect(productId) {
  var url = "{% url 'Checkout' %}";
  window.location.href = url + "/" + productId;
}

方案2：data属性+事件监听（更适合后续功能扩展） #

如果你后续要加点击埋点、前置库存校验等逻辑，更推荐这种无侵入的写法：

第一步：去掉行内onclick，给按钮加自定义data属性存商品id

<button class="order-btn" data-product-id="{{ item.id }}">Order</button>

第二步：用事件监听统一处理跳转逻辑

document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有下单按钮的点击事件
  document.querySelectorAll('.order-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // 从data属性读取商品id
      const productId = this.dataset.productId;
      const checkoutUrl = "{% url 'Checkout' %}";
      window.location.href = `${checkoutUrl}/${productId}`;
      // 后续扩展逻辑直接加在这里即可
    })
  })
})

两种方案都完全匹配你urls.py中定义的Checkout/<id>路由规则，可直接运行。

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