应使用语义化标签并设type="button"，配合data-product-id属性和addEventListener绑定事件，避免语义错误与维护难题。
按钮本身用 <button></button> 最稳妥
别用 <a></a> 标签假装是按钮，也不要用 <div> + JavaScript 模拟点击行为。语义错误会导致屏幕阅读器识别异常、键盘 <code>Enter 键无法触发、以及部分浏览器禁用 JS 后完全失效。
直接写：
<button type="button" data-product-id="123">加入购物车</button>其中
type="button" 是关键——避免表单内意外提交；data-product-id 用来绑定商品标识，后续 JS 取值用。
addEventListener 绑定点击，别用 onclick 内联写法
内联事件（如 onclick="addToCart(123)"）把逻辑和结构混在一起，难维护、无法批量绑定、且每次渲染都要重新绑定。
推荐方式：
document.querySelectorAll('button[data-product-id]').forEach(btn => {<br> btn.addEventListener('click', function() {<br> const pid = this.dataset.productId;<br> fetch('/api/cart', {<br> method: 'POST',<br> headers: {'Content-Type': 'application/json'},<br> body: JSON.stringify({ product_id: pid, quantity: 1 })<br> });<br> });<br});
-
dataset.productId自动转为小驼峰，比getAttribute('data-product-id')更简洁 - 用
fetch而非XMLHttpRequest，现代项目基本无兼容负担 - 没加防抖或禁用按钮，用户连点两次可能发两请求——这是真实线上 bug 高发点
点击后要有即时反馈，否则用户会反复点
网络请求有延迟，按钮必须立刻给出状态变化，否则用户以为没点上。
常见做法：
- 点击后立即将按钮文字改为
"已加入..."，并加disabled属性防止重复提交 - 成功后可恢复原文字，或显示徽标（如右上角小红点），但不要自动跳转页面
- 失败时需还原按钮，并用
alert或更友好的 toast 提示（比如"库存不足"），不能静默失败 - 注意：
disabled状态下按钮默认变灰，若用了自定义样式，要同步覆盖button:disabled的颜色和光标
服务端接收时注意 Content-Type 和参数校验
前端发的是 application/json，后端如果按 application/x-www-form-urlencoded 解析就会拿不到数据。
以 Express 为例，必须提前配置：
app.use(express.json()); // 处理 JSON body<br>app.use(express.urlencoded({ extended: true })); // 处理表单另外，product_id 必须做存在性检查、库存校验、用户登录态验证——这些不能只靠前端控制，绕过按钮点击直接调 API 是分分钟的事。
立即学习“前端免费学习笔记（深入）”；
