如何将卡片计数器的JS变量通过Ajax传递至Django视图？

问题场景 #

我有多个商品卡片，每个卡片都添加了计数器和“Add to cart”按钮，希望通过Ajax将商品数量传递到Django视图。但当前实现存在问题，每次传递的数量都是1，不知如何为每个卡片将计数器变量传入Ajax函数。

原代码问题分析 #

1. 使用全局变量globalVariable存储数量，多个商品卡片操作时，变量会被最后一次操作覆盖，无法对应当前点击的商品卡片。
2. 代码中$(this).$n.val()是错误写法，$n已经是定位到的输入框元素，直接调用$n.val()即可。
3. 点击“Add to cart”时依赖全局变量，若用户未点击加减按钮，全局变量未初始化就会默认传1，不符合实际输入框的值。

修正后的代码 #

HTML代码（无需修改） #

{% for item in items %}
      <div class="col">
        <div class="card mb-4 rounded-4 shadow-sm">
          <div class="card-header py-3">
            <h3 class="my-0 fw-normal">{{ item.name }}</h3>
          </div>
          <div class="card-body">
            <h4 class="card-title pricing-card-title ">${{ item.price }}</h4>
            <ul class="list-unstyled mt-3 mb-4">
              <li>{{ item.description }}</li>
            </ul>
              <div class="row">
                <div class="col">
                  <div class="col input-group input-group-sm mb-3">
                      <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
                      <input type="text" name="qty" value="1" class="input-qty form-control">
                      <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
                  <div class="col">
            <a data-id="{{ item.id}}" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
         </div>
          </div>
              </div>
        </div>
      </div>
    {% endfor %}

JavaScript代码 #

// 加减按钮逻辑，去掉全局变量依赖
var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");

buttonPlus.click(function() {
  var $n = $(this).closest(".input-group").find(".input-qty");
  $n.val(Number($n.val()) + 1);
});

buttonMinus.click(function() {
  var $n = $(this).closest(".input-group").find(".input-qty");
  var amount = Number($n.val());
  if (amount > 1) { // 避免数量变为0
    $n.val(amount - 1);
  }
});

$(document).ready(function() {
  $(".send-quantity").click(function() {
    // 找到当前按钮所在卡片对应的输入框
    var $inputQty = $(this).closest(".row").find(".input-qty");
    var quantity = Number($inputQty.val()) || 1;
    var id = $(this).data("id");
    
    $.ajax({
      url: "{% url 'stripe_order:cart_add' %}",
      method: "POST", // Django视图建议用POST请求
      data: {
        'id': id,
        'quantity': quantity,
        'csrfmiddlewaretoken': "{{ csrf_token }}" // Django必须带CSRF令牌
      },
      success: function(response) {
        // 可选：请求成功后的处理，比如提示添加成功
        console.log("商品已加入购物车");
      },
      error: function(xhr) {
        // 可选：请求失败后的处理
        console.error("添加失败");
      }
    });
  });
});

关键修改点 #

• 移除全局变量，点击“Add to cart”时，通过DOM层级关系closest(".row")定位到当前卡片对应的输入框，直接获取数量，确保每个商品的数量独立。
• 修正加减按钮中输入框的定位方式，用closest(".input-group")更精准找到父容器。
• 给Ajax请求添加method: "POST"和CSRF令牌，符合Django的安全要求。
• 优化数量判断，确保数量至少为1（避免减到0）。

内容的提问来源于stack exchange，提问作者Андрей