javascript - html不同的页面内容取决于所单击的内容

我有一个网站，将出售多种产品。到目前为止，我的列表页面看起来像这样

<div class="col-sm-9 padding-right">
    <div class="features_items"><!--features_items-->
        <h2 class="title text-center">My Products</h2>

        <?php
        $servername = "server";
        $username = "user";
        $password = "pass";
        $dbname = "dbname";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }


        $sql2 = "SELECT * FROM myproducts WHERE 1 ORDER BY ProductName ASC";
        $myresult = $conn->query($sql2);

        $x = 1;
        while ($row = $myresult->fetch_assoc()) {
       ?>
       <div class="col-sm-4">
           <div class="product-image-wrapper">
               <div class="single-products">
                   <div class="productinfo text-center">

                       <img src="../../images/myImages/<?php echo $row['ProductImage1'];?>_0001_1.jpg" alt="../../images/myImages/<?php echo $row['ProductImage1'];?>_0001_1.jpg" />
                       <h2><?php echo $row['ProductPrice']; ?></h2>
                       <p><?php echo $row['ProductName']; ?></p>
                       <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                   </div>
                   <div class="product-overlay">
                       <div class="overlay-content">
                           <h2><?php echo $row['Vendor']; ?></h2>
                           <h2><?php echo $row['ProductName']; ?></h2>
                           <p>$ <?php echo $row['ProductPrice']; ?></p>
                           <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                       </div>
                   </div>
               </div>
               <div class="choose">
                   <ul class="nav nav-pills nav-justified">
                       <li><a href=""><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
                       <li><a href=""><i class="fa fa-plus-square"></i>Add to compare</a></li>
                   </ul>
               </div>
           </div>
       </div>
       <?php
       }
    $conn->close();
?>

上面的代码循环遍历数据库中的所有内容，并将其显示在屏幕上。我想要的是，当您单击某个产品时，它会转到另一个页面并显示特定的产品信息。我有数百种产品要单独显示，我想知道是否有一种方法不必写100多个html文件，所以每个页面都可以有自己的显示方式。

理想情况下，安装程序应类似于上述内容，其中它是使用php从数据库中提取并显示需要在屏幕上显示的内容。但是我的问题是，一旦单击产品，新页面将如何知道已通过了什么产品，我想到的唯一方法是创建所有单个产品页面。

最佳答案

您需要定义这样的路线

my-website.com/product.php?id=2

其中id是每个产品的ID。

要么

如果表上有slug列，则可以

my-website.com/product.php?slug=a-nice-product

slug将是为每种产品生成的存储段。

因此，无论哪种方法适合您，您都可以使用产品的id或slug来获取特定产品，以显示在产品详细信息页面上。

显示格式将基于预定义的模板。
与您在产品列表中所做的类似

    <?php
  $servername = "server";
  $username = "user";
  $password = "pass";
  $dbname = "dbname";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

  $id = $_GET['id']; // in the case of "my-website.com/product.php?id=2"

  $sql2 = "SELECT * FROM myproducts WHERE id=$id ORDER BY ProductName ASC"; // NOTE:: This is a bad practice
  $myresult = $conn->query($sql2);

  if($myresult):
?>

<div class="col-sm-9 padding-right">
        <h2 class="title text-center">Details about <?= $myresult['ProductName']; ?></h2>

        <!-- LIST PRODUCT DETAILS BASED ON TEMPLATE DESIGN -->

</div>
<?php
    endif;
    $conn->close();
?>

更新：

    $id = $_GET['id']; // in the case of "my-website.com/product.php?id=2"

      $sql2 = "SELECT * FROM myproducts WHERE id=$id ORDER BY ProductName ASC";
// NOTE:: This is a bad practice as it is open to SQL injection attacks.

阅读有关SQL injection的更多信息

同样，更干净的网址看起来像这样

my-website.com/product/2

要么

my-website.com/product/a-nice-product

但是要实现此目的，您需要设置一些htaccess规则。

关于javascript - html不同的页面内容取决于所单击的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44317659/