单击按钮或 link 后如何在两个页面之间传递元素的属性值？

Question

我正在从数据库中读取记录并使用卡片来显示它们。记录中的每一行都用于构造一张独立于其他卡片的卡片。每张卡片都有一个按钮来展开视图，以在下一页显示该特定用户的更多详细信息。我想要 'id' 已点击卡片的用户并将其转移到下一页，以便我可以在另一个 mysql 查询中使用它。

请使用 php 和 javascript 回答问题。

<?php
 include_once('connect.php');
 $sql = "SELECT * FROM user";
 $result = $conn->query($sql);

?>

<!DOCTYPE html>

    <header>

        <meta charset="utf-8">

        <!--========Personal style sheet link===========-->
        <link rel="stylesheet" href="css/style.css">

        <!--========Bootstrap cdn link============-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <!--==========Google fonts link==========-->
        <link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Poppins|Roboto|Roboto+Condensed|Roboto+Mono&display=swap" rel="stylesheet">
        <!--

            font-family: 'Roboto Condensed', sans-serif;
            font-family: 'Montserrat', sans-serif;
            font-family: 'Roboto', sans-serif;
            font-family: 'Oswald', sans-serif;
            font-family: 'Roboto Mono', monospace;
            font-family: 'Poppins', sans-serif;

        -->

    </header>

    <body id="users-body" onload="createCard();">

            <!--========Navigation bar==========-->
            <div id="navbar" class="container">

                    <ul class="nav nav-pills justify-content-end">
                        <li class="nav-item"><a class="nav-link" href="/index.html">HOME</a></li>
                        <li class="nav-item"><a class="nav-link active" href="/users.php">VIEW ALL USERS</a></li>
                    </ul>

                </div>


<!--===========Function for creating dynamic card element===========-->

                            <script>


                                function createCard(){

                                    <?php
                                    while($row = $result->fetch_assoc()){

                                    ?>

                                    var box = document.createElement("div");
                                    box.setAttribute("class", "container");
                                    box.setAttribute("class", "justify-content-center");


                                    var card = document.createElement("div");
                                    card.setAttribute("class","card");

                                    var cardBody = document.createElement("div");
                                    cardBody.setAttribute("class", "card-body");

                                    var cardImage = document.createElement("img");
                                    cardImage.setAttribute("class", "card-img-top");
                                    cardImage.setAttribute("src", "/images/dummy_user_image.png");
                                    cardImage.setAttribute("alt", "user-image");
                                    cardImage.setAttribute("style", "width: 10rem; height: 10rem; border-radius: 50%;");

                                    var cardTitle = document.createElement("h2");
                                    cardTitle.setAttribute("class", "card-title");
                                    cardTitle.innerText = "<?php echo $row['name'] ?>";

                                    var idLabel = document.createElement("h6");
                                    idLabel.setAttribute("id", "<?php echo $row['id'] ?>");
                                    idLabel.innerText = "ID: ";

                                    var idNum = document.createElement("span");
                                    idNum.setAttribute("id", "id-pass");
                                    idNum.innerText = "<?php echo $row['id'] ?>";

                                    var cardSubtext = document.createElement("h6");
                                    cardSubtext.innerText = "Credit: ";

                                    var creditPoint = document.createElement("span");
                                    creditPoint.innerText = "<?php echo $row['credit'] ?>";

                                    var btn = document.createElement("a");
                                    btn.setAttribute("id", "view-btn");
                                    btn.setAttribute("href", "/details.html");
                                    btn.setAttribute("class", "btn btn-success");
                                    btn.setAttribute("role", "BUTTON");
                                    btn.innerText = "VIEW DETAILS";

                                    document.body.appendChild(box);
                                    box.appendChild(card);
                                    card.appendChild(cardBody);
                                    cardBody.appendChild(cardImage);
                                    cardBody.appendChild(cardTitle);
                                    cardBody.appendChild(idLabel);
                                    idLabel.appendChild(idNum);
                                    cardBody.appendChild(cardSubtext);
                                    cardSubtext.appendChild(creditPoint);
                                    cardBody.appendChild(btn);

                                    <?php 

                                    }
                                    ?>


                                }


                            </script>

    </body>

</html>

Answer 1

您可以在页面之间切换时以不同方式存储数据。

本地存储Documentation
会话存储Documentation
将 url 中的数据作为参数。（确保对 URL 中的数据进行编码）

单击按钮或 link 后如何在两个页面之间传递元素的属性值？

How to pass attribute value of an element between two pages after a button or a link is clicked?

javascript

php

attributes

element