如何在不刷新当前页面的情况下在另一页面上发布？答案

【问题标题】：How do I post on another page without the current one refreshing?如何在不刷新当前页面的情况下在另一页面上发布？
【发布时间】：2017-06-11 16:44:58
【问题描述】：

我正在构建一个购物车。我希望这样每次有人点击提交以将商品添加到他们的购物车时，它都会添加该商品，但它会保留在当前页面上而不刷新。然后，如果他们点击购物车图标，它会将他们带到他们物品所在的单独页面。使用下面的 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>

【问题讨论】：

Ajax - developer.mozilla.org/en-US/docs/AJAX

标签： php html forms post shopping

【解决方案1】：

您需要使用 JavaScript 而不是传统的表单元素来发出请求。 JS 允许您使用称为“AJAX”的技术向服务器发出异步请求，而无需刷新用户页面。为了简单起见，这是一个使用 jQuery 的示例：

$(document).ready(function () {
    $('form.addToCart').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),

            success: function (data) {
                alert("Item added to cart!");
            },

            error: function (jxhr, text, error) {
                alert(error);
            }
        });
    });
});

（请注意，您不必使用 jQuery 来发出此类异步请求，但它有助于解决访问者可能使用的不同浏览器之间的不一致问题。）

确保您的所有表单标签都有“addToCart”类，例如：

<form class="addToCart" action="..." method="post"> ...

【讨论】：

好吧，这在第一个产品上效果很好，但在页面上的任何其他产品上都不起作用。无论如何让它适用于所有产品？对不起，我对编程很陌生。
没有看到您的代码，我不得不猜测一下，但是您是否可能为页面上的所有表单重复使用相同的#myForm ID？ HTML ID 必须是唯一的。我已经更新了答案以支持多种表单，而不管 ID 是什么——请注意您需要对 HTML 进行更改以支持这一点。

【解决方案2】：

您可以使用 ajax 提交表单。使用ajax提交表单，防止页面加载

可以使用onForm提交方法

喜欢：

$("#myForm").submit(function(e){
e.preventDefault();
    $.ajax({
            url:'action.php',
            type:"POST",
            data:$("#myForm").serialize(),
            success:function(data){
                $("#snackbar").html(data);
                show_snakbar()
            }

    });
});

您可以使用您的值对其进行自定义

【讨论】：