使用javascript添加到购物车，而不刷新页面

Question

我正在创建一个购物页面，其中有许多来自数据库的日常显示项目。我希望能够添加购物车中的产品而不刷新页面，我想知道如何用javascript提交，并能够获得特定的数据id。

通常，我只需要创建一个href并将product_id作为URL中的变量传递，然后使用php来操作变量

<?php
$all_products = all_products();
echo '<div class="products">';
foreach($all_products as $key => $data){
echo '<div class="single-product">
<img src="'.$data['src'].'">
<h3>'.$data['name'].'</h3>
<h4>'.$data['price'].'</h4>
<button type="submit" class="addToCart" data-id="'.$data['product_id'].'">Add to cart</button>
</div>

';
}

echo '</div>';
?>
<script>
let addToCart = document.getElementsByClassName('addToCart');
addToCart.addEventListener("submit",(e)=>{
//let id = e.querySelector(data-id);
})
</script>

更新

感谢@M.Eriksson的建议，我在网上发现了这一点，所以如果我用href替换按钮，并在变量中传递带有product_id的javascript函数add_to_cart((，我可以使用console.log访问javascript中的该变量，我可以正常地获取id，但是，我需要操作id并使用xmlhttpRequest发送它，但它给出的状态为0，我在sintax中没有看到任何错误，我在其他页面中使用了相同的xmlhttpRequest从服务器请求产品，并使用

<?php
$all_products = all_products();
echo '<div class="products">';
foreach($all_products as $key => $data){
echo '<div class="single-product">
<img src="'.$data['src'].'">
<h3>'.$data['name'].'</h3>
<h4>'.$data['price'].'</h4>
<a ref="javascript:add_to_cart('.$data['product_id'].')">Add to cart</a>
</div>

';
}

echo '</div>';
?>
<script>

add_to_cart();
function add_to_cart(product_id=1){
console.log(product_id);
let form_data = new FormData();
form_data.append('product_id', product_id);

let url_data ="php/add_to_cart.php";
let ajax_request = new XMLHttpRequest();

ajax_request.open('POST',  url_data);
let status1 = ajax_request.status;  
console.log(status1);
ajax_request.onload = function(){
//console.log(ajax_request.responseText);

if(status1 == 200){
let output = JSON.parse(this.response);

//display product added sucessfully
let added_successfully = document.getElementById('added_successfully');
added_successfully.innerHTML=output['success'] ;
}
}
ajax_request.send(form_data);

}
</script>

Answer 1

我要做的是将按钮类型更改为button，也就是：<button type="button">Button</button>

然后更改EventListener以单击并从事件中获取目标以访问数据。

之后，您可以使用fetch函数从javascript调用php脚本，该函数将向后端服务器发送HTTP请求。

例如：(未经测试(

<button type="button" class="addToCart" data-id="some data">Add to cart</button>
<script>
let buttonsList = document.getElementsByClassName('addToCart');
for (button of buttonsList) {
button.addEventListener("click",(e)=>{
fetch('/path/to/your/product/api?product_id=' + e.target.getAttribute('data-id')).then((data) => {
console.log('product added to cart!')
})
})
}
</script>

希望这有帮助：-(