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

I am reading records from a database and used a card to display them. Each row from the record is used to construct a single card which is independent of the others. Every card has a button to expand view to show more details of that particular user on the next page. I want the 'id' the user whose card has been clicked and transfer it to the next page so that I can use it in another mysql query.

Please answer the question using php and 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>

1个回答



您可以在切换页面时以不同方式存储数据。</ p>


  1. 本地存储文档 </ p > </ li>

  2. 会话存储文档 </ p> </ li>

  3. 将url中的数据保存为params。(确保对URL中的数据进行编码)</ p> </ li> \ n </ ol>
    </ div>

展开原文

原文

You can store the data in different ways while switching between pages.

  1. Local storage Documentation

  2. Session storage Documentation

  3. Keep data in url as params.(Make sure that you encode the data in the URL)

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐