現在のページを更新せずに別のページに投稿するにはどうすればよいですか？

Question

私はショッピングカートを構築しています。私はそれが欲しいので、人が自分のカートにアイテムを追加するために提出するたびにアイテムを追加しますが、それは最新のページに残りません。次にカートアイコンをクリックすると、それらのアイテムがある別のページに移動します。下記の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> 

Answer 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"> ... 

Answer 2

あなたがフォームを送信するために、AJAXを使用することができます。 //開発者： - httpsの

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

    }); 
}); 

あなたは自分の価値観