最常用方法是在按钮上添加data-id属性并用javascript读取；表单提交时应使用type="hidden"输入框存放商品id，避免用url路径或id属性。
点击按钮时怎么拿到商品ID
按钮本身不“拥有”ID，得靠它绑定的数据源。最常用的是把 data-id 属性写在按钮上，点击时用 JavaScript 读取：
<button class="add-to-cart" data-id="1024">加入购物车</button>然后监听点击：
document.querySelectorAll('.add-to-cart').forEach(btn => {
btn.addEventListener('click', () => {
const productId = btn.dataset.id; // → "1024"
addToCart(productId);
});
});别用 id 属性存商品ID——它在页面里必须唯一，而商品列表里多个按钮不能共用同一个 id。
用表单提交时商品ID放哪合适
如果走传统表单提交（比如 POST 到 /cart/add），<input type="hidden"> 是最稳妥的位置：
-
name值要和服务端约定好（比如后端期待的是product_id还是id） - 不要把 ID 写在
action里拼成/cart/add?product_id=1024——GET 参数易被篡改，且不符合 REST 语义 - 如果一个页面有多个商品，每个表单的
value必须动态生成，不能硬编码
服务端收不到 product_id 的常见原因
前端传了，后端拿不到，大概率卡在这几个环节：
- 表单没写
method="POST"，浏览器默认用 GET，后端从POST数据里自然读不到 - Node.js/Express 没配
body-parser中间件，或没启用urlencoded({ extended: true }) - PHP 里用了
$_GET却提交的是 POST，该用$_POST['product_id'] - 按钮写了
type="button"而不是type="submit"，表单根本没触发提交
product_id 字段，再查服务端日志。
要不要用 URL 路径传商品ID（如 /cart/add/1024）
可以，但只适合简单场景，比如单个固定按钮；遇到商品列表就得为每个按钮生成独立路由，模板渲染复杂度陡增。更关键的是：
- RESTful 路由
/cart/add/1024语义上是“对 ID 为 1024 的资源执行 add”，但实际行为是“向购物车添加商品”，主语错位 - 前端 JS 调用时得拼字符串，容易漏转义：
fetch(`/cart/add/${id}`)遇到id = "1024<script>"</script>就危险 - 后端框架（如 Django、Rails）对路径参数有长度和字符限制，纯数字 ID 没问题，但万一以后支持 SKU 字符串（如
"PROD-A-2024-XL"）就容易出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
