如何通过HTML、JavaScript和Flask获取SQL菜品ID并加入购物车

一、修改Jinja模板传递菜品ID #

有两种常用方式给按钮绑定对应菜品的ID：

方式1：通过onclick直接传递ID #

修改模板中的按钮代码，在onclick调用自定义函数时传入当前菜品的id：

{% for gerecht in gerechten %}
<div class="Gerechtdiv">
  <img src="{{gerecht.url}}" class="gerechtimg">
  <h3 class="GerechtTitel">{{gerecht.gerecht}}</h3>
  <p class="GerechtBeschrijving">{{gerecht.beschrijving}}</p>
  <div class="BottomGerechtDiv">
    <p style="font-size: 17px;"><b>€{{gerecht.prijs}}</b></p>
    <p>{{gerecht.sterren}}&#9733</p>
  </div>
  <!-- 修改此处，传入菜品ID -->
  <button class="button" onclick="addToCart({{gerecht.id}})"><span>Voeg toe aan winkelwagen</span></button>
</div>
{% endfor %}

方式2：通过data-*属性存储ID（推荐） #

这种方式更符合HTML语义化，避免内联事件的耦合：

{% for gerecht in gerechten %}
<div class="Gerechtdiv">
  <!-- 其他内容不变 -->
  <!-- 添加data-id属性存储菜品ID -->
  <button class="button add-to-cart" data-id="{{gerecht.id}}"><span>Voeg toe aan winkelwagen</span></button>
</div>
{% endfor %}

二、编写JavaScript处理添加逻辑 #

对应方式1的JS代码 #

在HTML页面的<script>标签中定义addToCart函数：

function addToCart(gerechtId) {
  // 打印ID验证获取成功
  console.log("添加菜品ID：" + gerechtId);
  
  // 示例1：将ID存入localStorage（前端临时存储）
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  // 可选：避免重复添加
  if (!cart.includes(gerechtId)) {
    cart.push(gerechtId);
    localStorage.setItem('cart', JSON.stringify(cart));
    alert("菜品已添加到购物车");
  } else {
    alert("该菜品已在购物车中");
  }
  
  // 示例2：发送请求到Flask后端处理
  fetch('/add-to-cart', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': '{{ csrf_token() }}' // 启用CSRF保护时需添加
    },
    body: JSON.stringify({ id: gerechtId })
  })
  .then(response => response.json())
  .then(data => {
    alert(data.message);
  });
}

对应方式2的JS代码（事件监听） #

用事件委托给所有添加按钮绑定点击事件：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有.add-to-cart按钮绑定事件
  document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function() {
      const gerechtId = this.dataset.id; // 获取data-id的值
      
      // 后续逻辑和方式1一致
      console.log("添加菜品ID：" + gerechtId);
      
      // 示例：发送请求到后端
      fetch('/add-to-cart', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ id: gerechtId })
      })
      .then(res => res.json())
      .then(data => {
        alert(data.message);
      });
    });
  });
});

三、可选：Flask后端处理购物车路由 #

如果需要后端存储购物车数据，可以添加一个POST路由：

from flask import request, jsonify, session

@app.route('/add-to-cart', methods=['POST'])
def add_to_cart():
    data = request.get_json()
    gerecht_id = data.get('id')
    
    # 用session存储购物车（用户会话内有效）
    if 'cart' not in session:
        session['cart'] = []
    # 避免重复添加
    if gerecht_id not in session['cart']:
        session['cart'].append(gerecht_id)
        return jsonify({'message': '菜品已添加到购物车', 'cart_count': len(session['cart'])})
    else:
        return jsonify({'message': '该菜品已在购物车中', 'cart_count': len(session['cart'])})

注意事项 #

• 若使用Flask的CSRF保护（Flask-WTF），发送POST请求时必须携带CSRF令牌。
• 实际场景中，建议存储菜品的完整信息（如名称、价格）而非仅ID，避免后续查询数据库的开销。

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