在不刷新的情况下在同一php页面中传递var

Question

我的网站有问题。 我有从数据库中获得的产品列表。 这些产品具有图像和名称阵营。 现在，我想要的是，当我单击某个产品的某人时，在我的网页上出现一个新框，其中包含产品说明，价格等。这是产品列表的代码

<?php
  include 'php/dbmanager.php';
  $result = DBManager::getInstance()->getProducts();
  if($result->num_rows > 0){
    $i = 0;
    while($row = $result->fetch_assoc()){
      echo "<div class=\"wrap effect8 open\" onclick>";
      echo "<h1>".$row['product_name']."</h1>";
      echo "<div class=\"left\">";
      echo "<img src=".$row['product_image']."  width=150  height=150  >";
      echo "</div>";
      echo "<div class=\"right\">";
      echo $row['product_description'];
      echo "<div class=\"prodSelection\">";
      echo '<a href="catalogo.php?prodID=';
      echo $row[product_id];
      echo '"';
      echo 'class="button">Acquista</a>';
      echo '<label>';
      echo '<select class="selectBoxCat">';
      echo '<option selected> 1 </option>';
      echo '<option>2</option>';
      echo '<option>3</option>';
      echo '</select>';
      echo '</label>';
      echo '</div>';
      echo '</div>';
      echo '</div>';

    }
  }
?>

我如何从单击的单个产品中获取ProductID（$ row [product_id]）并将其用于新查询，以选择该单个产品的数据库行（并使用该查询生成另一个类似的php）？

我不想刷新页面。

我可以使用pushstate方法（HTML5）吗？

Answer 1

如果要在用户单击时获取其他数据，则需要发出ajax请求以更新您的DOM，而无需刷新页面。

在PHP方面，您将需要创建一个返回json编码值的脚本。

在JS端，您将要创建一个click事件监听器。 在侦听器内部，您需要向您的PHP脚本发出ajax请求。

从ajax调用成功返回数据后，您将需要操纵DOM来显示产品的详细信息。

点击监听器的示例：

$("#button").on("click", function(){
    // make your ajax request here
});

ajax调用的示例：

$.ajax({
    method: "POST",
    url: "scriptThatReturnsProductDetails.php",
    data: 
    {
        productID: $("#myProduct").attr('id')
    }
})
.done(function( msg ) {
    // Do some DOM manipulation
});