时间戳

首页 > 解决方案 > 当你点击不同的链接时，有没有办法改变页面上的某些元素？

javascript - 当你点击不同的链接时，有没有办法改变页面上的某些元素？

问题描述

我正在尝试为商店制作网站。在产品页面上，我显示有关从数据库加载的所有产品的一般信息。我想创建一个单独的页面，该页面将根据用户单击的产品显示不同的文本和图像（我希望用户在单击任何产品时转到此页面）。这是可能的还是每次添加产品时我都需要编写一个新页面？

        <?php

            $sql = "SELECT * FROM products;";
            $result = mysqli_query($conn, $sql);
            $resultCheck = mysqli_num_rows($result);

            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            };

            if ($resultCheck > 0) {
                while($row = mysqli_fetch_assoc($result)){
                    echo "<div class='productCard'>";
                    echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>';

                    echo    "<h1>" .$row["name"]. "</h1>
                            <h1>" .$row["stock"]. "</h1>
                            </div>";
                    
                }
            } else {
                echo "0 results";
            }

        ?>

标签： javascriptphphtmlcss

解决方案

这不仅是可能的，而且是非常常见的功能，并且在许多 PHP 教程中都有介绍。您可能已经使用过一个或多个不包含此功能的教程，但我们始终鼓励您探索更多教程和示例。

在高层次上，您实际上要做的是让每个链接都包含一个您想要显示的记录的标识符。例如，您的部分内容echo可能包括如下内容：

echo '<a href="product.php?id=' . $row['id'] . '">Click here</a>';

这会产生类似的东西：

<a href="product.php?id=123">Click here</a>

（有不同的方法可以做到这一点。单引号与双引号、heredoc 语法等。我个人也喜欢将 HTML 保持在规范中，这意味着客户端双引号。但是您选择发出您的任何方式对客户的标记很好。）

当用户单击链接时，查询字符串参数id=123会跟随用户到该product.php页面。然后在该页面上的代码中，您将从$_GET数组中读取值：

$id = $_GET['id'];

（对于请求中提交的其他类型的数据，存在其他数组。URL 查询字符串参数是 的一部分$_GET。）

然后，您将在数据库查询中使用该值。查询本身可能看起来像这样（借用这里关于 SQL 注入的一个很好的答案，对于初学者来说绝对值得一读）：

$stmt = $conn->prepare('SELECT * FROM products WHERE id=?');
$stmt->bind_param('i', $id); // 'i' specifies the variable type => 'integer'
$stmt->execute();

$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
    // Do something with $row
}

不同的数据库技术以不同的方式将值绑定到查询。但是作为一个初学者，现在是时候养成绑定值而不是连接字符串的习惯了。这就是前面提到的关于 SQL 注入的问题/答案变得非常有用的知识的地方。

在该循环中（即使只有一条记录，尽管您可能希望进行一些检查以确保只有一条或至少一条并相应地做出响应），您可以显示有关该记录的数据，类似于您已经为主页上的多条记录。

推荐阅读