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

如何解决ajax，多个添加到购物车按钮：为什么只有第一个有效？

我是 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>

解决方法

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

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

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

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

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

第一种方法，稍微详细一点。实际上不需要这个类，我们将使用一个数据属性来携带产品 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);
}