我正在建造一个购物车。我希望这样每次一个人点击提交以将项目添加到他们的购物车时它会添加该项目,但它会保留在当前页面上而不会刷新。然后,如果他们点击购物车图标,它会将他们带到他们的项目所在的单独页面。使用下面的PHP,我可以提交项目,它们将显示在购物车页面中,但提交按钮仍会刷新购物页面。
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "root", "tut");
if(isset($_POST["add"]))
{
if(isset($_SESSION["cart"]))
{
$item_array_id = array_column($_SESSION["cart"], "product_id");
if(!in_array($_GET["id"], $item_array_id))
{
$count = count($_SESSION["cart"]);
$item_array = array(
'product_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'product_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"]
);
$_SESSION["cart"][$count] = $item_array;
echo '<script>window.location="index.php"</script>';
}
else
{
echo '<script>alert("Products already added to cart")</script>';
echo '<script>window.location="index.php"</script>';
}
}
else
{
$item_array = array(
'product_id' => $_GET["id"],
'item_name' => $_POST["hidden_name"],
'product_price' => $_POST["hidden_price"],
'item_quantity' => $_POST["quantity"]
);
$_SESSION["cart"][0] = $item_array;
}
}
if(isset($_GET["action"]))
{
if($_GET["action"] == "delete")
{
foreach($_SESSION["cart"] as $keys => $values)
{
if($values["product_id"] == $_GET["id"])
{
unset($_SESSION["cart"][$keys]);
echo '<script>alert("Product has been removed")</script>';
echo '<script>window.location="thebag.php"</script>';
}
}
}
}
?>
<div id="mainform">
<div id="form">
<form method="post" action="index.php?action=add&id=<?php echo $row["id"]; ?>" id="myForm">
<h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
<h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
<input type="hidden" name="quantity" class="form-control" value="1">
<input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
<input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
<input type="submit" name="add" value="Submit">
</form>
</div>
</div>
答案 0 :(得分:1)
您需要使用JavaScript而不是传统的表单元素来发出请求。 JS允许您向服务器发出异步请求,而无需使用称为“AJAX”的技术刷新用户页面。这是一个使用jQuery的例子,为简单起见:
<form class="addToCart" action="..." method="post"> ...
(请注意,您不必使用jQuery来生成这些类型的异步请求,但它有助于解决访问者可能使用的不同浏览器之间的不一致。)
确保所有表单标记都具有“addToCart”类,例如:
{{1}}
答案 1 :(得分:0)
您可以使用ajax提交表单。使用ajax提交表单并阻止页面加载
您可以使用onForm提交方法
像:
timer(timeFraction) {
switch(this.easing) {
case 'ease-in':
return timeFraction * timeFraction;
break;
case 'ease-out':
return timeFraction * (2 - timeFraction);
break;
case 'circ':
return 1 - Math.sin(Math.acos(timeFraction));
break;
case 'bounce':
for (let a = 0, b = 1; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
break;
default:
return timeFraction;
break;
}
}
您可以使用您的值
自定义它