如何使用ajax将产品添加到购物车中

Question

我正在创建一个电子商务网页，它几乎已经完成了，但我注意到，在将产品添加到购物车时，它会重定向到PC上产品部分(即产品1)的开头，这几乎不会影响任何事情，因为产品可以显示在整个屏幕上，但如果你在移动设备上添加了一个非常坏的产品，这将是非常乏味的，起初我试图在表单的操作中向产品id添加重定向，从而避免一开始就进行重定向，但这种重定向很糟糕，可能会让客户端感到眩晕。然后尝试使用ajax，我已经查看了其他帖子，甚至看到了教程，但它们都不适合我。我想要的是，当我按下添加到购物车时，它会被添加。以下是部分代码：

产品部分：

<div class="container">
<div class="back-container"><button class ="back" onclick="location.href='productos.php'"><i class="fa-solid fa-arrow-left-long"></i></button></div>
<section class="Productos">
<article class="panrallado-grimaldi">
<h1>Pan Rallado</h1>      
<div class="productos">
<?php
$select_products = $connect->prepare("SELECT * FROM `productos` WHERE categoria='pr'") or die('query failed');
$select_products->execute();
$list_products = $select_products->fetchAll(PDO::FETCH_ASSOC);  
foreach($list_products as $producto){
include 'productact.php'; } ?>                    
</div>
</article>     
</section>
</div>
</main>
<script src="function.js"></script>
<script>
$('body').on('submit', '.formadd', function(ev){
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'backend/addCart.php',
data: $(id).serialize(),
success: function(data) {
$('.nav').load(' .nav');
},
error: function() {
alert('No se pudo agregar al carrito, intente mas tarde');
}
});
ev.preventDefault();
});
</script>
</body>
</html>   

productadd(所有产品的表单)：

<?php 
$id = $producto['id'];
$codigo = $producto['codigo'];
$imagen = "media/productos/$codigo.png";
$nombre = $producto['nombre'];                   
$precio = $producto['precio']; 
$bulto = $producto['bulto']                
?>
<div class="p" id="<?php echo $id?>">
<img src="<?php echo $imagen; ?>" alt="<?php echo $nombre?>" title="<?php echo $nombre?>">
<p ><?php echo $nombre; ?></p>
<form action="backend/addCart.php" class="formadd" id="<?php echo $id?>" method="post">
<?php if(isset($_SESSION['email'])){?>
<p>(x <?php echo $bulto; ?>)</p>
<p class="precioo pps">$<?php echo number_format($precio, 0, ',', '.') ?></p>                                    
<input type="hidden" name="id" value="<?php echo openssl_encrypt($id,COD,KEY);?>">
<input class="cantidad pps" type="number" min="1" name="cantidad" class="cantidad" placeholder="1">   
<div class="cc"><button type="submit" name="btnCart" value="Add" class="c pps">Agregar Al carrito</button></div>
<?php
} 
?>
</form>
</div>

addCart.php(添加产品的函数)：

<?php
if(!isset($_SESSION)) { 
session_start(); 
};
include 'connect.php';
include 'config.php';
if (isset($_POST['id'])) {
if(is_numeric(openssl_decrypt( $_POST['id'], COD, KEY))){
$ID = openssl_decrypt( $_POST['id'], COD, KEY);                        
}else{ echo '<script> alert("ID incorrecto"); </script>'; exit;
}
if($_POST['cantidad']<1){
$CANTIDAD = 1;
}else{                          
$CANTIDAD = $_POST['cantidad'];
}
if(!isset($_SESSION['cart'])){
$producto=array(
'ID'=>$ID,
'CANTIDAD'=>$CANTIDAD,
);
$_SESSION['cart'][0] = $producto;
echo '
<script>alert("Producto Añadido Exitosamente")</script>';
}else{
$idProductos=array_column($_SESSION['cart'],"ID");
if(in_array($ID, $idProductos)){
echo
'<script>alert("El Producto Ya Ha Sido Agregado")</script>';  

}else{
$producto=array(
'ID'=>$ID,
'CANTIDAD'=>$CANTIDAD,
);
array_push($_SESSION['cart'], $producto);  
echo '
<script>alert("Producto Añadido Exitosamente")</script>'       ;            
}
}
}
?>

问题是表单成功，做了我在success: function(data)上做的动作，但产品没有添加到购物车中。chrome控制台不会显示任何错误。

Answer 1

我已经完成了。如果有人想知道，这里是ajax代码：

$('.formadd').on('submit', function(ev) {   
var id2 = $(this);   
$.ajax({
type: $(id2).attr('method'),
url: $(id2).attr('action'),
data: $(id2).serialize(),
success: function(data) {               
$('.cantidad').val('');
$('.cartbasket').load(' .cartbasket');
$('.alert-co').removeClass('hide')
},
error: function() {
$('.alert-inc').removeClass('hide')
}
});
ev.preventDefault();
});