点击按钮时通过data-属性携带商品信息，用fetch发送JSON请求至后端，校验价格并更新本地购物车状态与UI。
点击按钮时如何把商品信息传给后端？
购物车按钮本身只是个触发器，真正关键的是点击后要告诉后端“用户想加哪件商品、加几个”。常见做法是用 data- 属性把必要信息挂载在按钮上：
比如：
<button class="add-to-cart" data-product-id="1024" data-sku="SKU-789" data-price="299.00">加入购物车</button>这样 JavaScript 就能直接读取：
btn.dataset.productId、btn.dataset.sku。别用 id 或 name 存商品 ID，它们语义不对，且容易和 DOM ID 冲突。
注意：价格不能只靠前端传——后端必须校验，否则用户改个 data-price 就能下单 0.01 元。实际下单时价格应以服务端返回为准。
前端加购逻辑该用 form 提交还是 fetch？
现在几乎不用 <form method="POST"></form> 直接跳转了。页面不刷新、有加载反馈、支持错误提示，都得靠 fetch（或 axios）：
典型流程：
- 按钮点击后禁用，避免重复提交（
btn.disabled = true） - 构造 JSON 请求体：
{ productId: '1024', quantity: 1 } - 发
POST /api/cart/items，不是 GET - 成功后更新按钮文字为“已加入”，或弹出小 toast
- 失败时恢复按钮状态，并显示
response.error（比如“库存不足”）
别漏掉 Content-Type: application/json 头，否则后端可能收不到 body。
按钮状态怎么同步到多个地方？ 一个商品页可能有“立即购买”“加入购物车”两个按钮，侧边栏还有购物车图标角标。状态不同步，用户会困惑。
推荐做法是维护一个轻量级前端 cart state（比如用 localStorage 缓存当前已加商品 ID 列表），每次加购成功后：
- 更新
localStorage.setItem('cartItems', JSON.stringify(items)) - 触发自定义事件：
document.dispatchEvent(new CustomEvent('cart-updated')) - 各模块监听该事件，各自更新 UI（角标数字、按钮文字、禁用态）
注意：不要在每次点击都重新拉全量购物车数据——除非你明确需要实时库存/价格，否则本地缓存 + 事件驱动更轻、更快。
移动端点击无响应？检查这三处 很多“按钮点不动”其实和 HTML 无关，而是 CSS 或事件绑定问题：
常见原因：
- 父容器有
pointer-events: none（比如某些弹窗遮罩层没关好） - 按钮被
z-index压在底层，用浏览器开发者工具的“元素选择器”点一下确认是否真选中了按钮 - 绑定事件用了
click，但 iOS Safari 对<button></button>外的元素（比如套了<div>）有时不触发——统一用 <code><button></button>标签，别套太多层最简单的验证方式：给按钮加个
console.log('clicked')，看控制台有没有输出。没有的话，基本就是上面三类之一。 真实场景里，购物车按钮的复杂度不在“怎么画一个按钮”，而在于它连着库存校验、登录态拦截、优惠券上下文、跨设备同步……这些逻辑往往藏在点击之后的几十行代码里，而不是按钮本身。
