ajax，多个添加到购物车按钮：为什么只有第一个有效？答案

【问题标题】：ajax, multiple add to cart buttons: why does only first one work?ajax，多个添加到购物车按钮：为什么只有第一个有效？
【发布时间】：2021-04-16 03:15:05
【问题描述】：

我是 AJAX 新手，正在尝试在我的电子商务网站上使用多个添加到购物车按钮。

目前只有第一个异步工作。其他三个将运行 additemtocart.php 代码（将商品添加到购物车），但页面会重新加载并出现“？”被附加到 url 的末尾，就像一个 GET 请求？？

如果可能的话，我想坚持使用 vanilla js。谢谢你的帮助。

<h1>Multiple add to cart buttons vanilla js</h1>
<form id="A2Cform">
    <input type="submit" value="add to cart" onClick = "A2Cdbq('28753')">
</form>

<form id="A2Cform">
<input type="submit" value="add to cart" onClick = "A2Cdbq('28754')">
</form>

<form id="A2Cform">
<input type="submit" value="add to cart" onClick = "A2Cdbq('28755')">
</form>

<form id="A2Cform">
<input type="submit" value="add to cart" onClick = "A2Cdbq('28756')">
</form>

<div id="addtocartMsg"> </div>

<script>
    document.getElementById("A2Cform").addEventListener("submit", function(event){event.preventDefault()});

    function A2Cdbq(prodid){//add item to the cart table

        var params = "product_id="+prodid;

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'additemtocart.php', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        xhr.onload = function(){
            if(this.status == 200){
            console.log(this.responseText);

            document.getElementById('addtocartMsg').innerHTML = 'Item added to cart.';

            }
        }
        xhr.send(params);
    }
</script>

【问题讨论】：

标签： php mysql ajax

【解决方案1】：

浏览器非常宽松，即使你把 HTML 搞得一团糟，它们也会尝试理解你的意思，但 ID 应该唯一标识一个元素，并且 2)document.getElementById 只返回 一个元素。这意味着只有第一个表单会获得一个阻止默认提交操作的事件处理程序，因此其他表单将执行表单通常执行的操作：提交（使用默认 GET 方法，默认操作是当前 URL）。李>

执行此操作的一个正确方法是将您的id 更改为另一个属性，例如class。然后你可以使用document.getElementsByClassName 或document.querySelectorAll 来抓取多个元素，遍历它们并为每个元素附加一个事件监听器。

或者，您可以只将一个事件侦听器附加到这些元素的共同祖先，然后在处理程序中检查事件目标是否具有正确的类。

第一种方法稍微简单一些。

此外，不鼓励以这种方式使用onclick。如果您附加的处理程序确实完成了工作，而不必在 HTML 中编写 JavaScript，那就更好了。但是，如果您致力于此，那么您根本不需要提交处理程序，只需确保从 onclick 返回 false。

第一种方法，更详细一点。实际上不需要类，我们将使用一个数据属性来携带产品ID，我们可以根据它的存在找到按钮，使用attribute selector。请注意，由于没有正常提交，我们实际上不需要表单，只需一个按钮：

<input type="button" value="add to cart" data-prod="28755"/>

在 JavaScript 中：

function A2Cdbq(evt) {
  evt.preventDefault();
  const prodid = evt.target.getAttribute("data-prod");
  // ....
}

for (const element of document.querySelectorAll("[data-prod]")) {
  element.addEventListener("click", A2Cdbq);
}

【讨论】：