php 是否有一种方法可以在不重新加载页面的情况下从数据库中提取记录

wtlkbnrh  于 2022-12-02  发布在  PHP
关注(0)|答案(3)|浏览(205)

我如何获取我的数据,即电影名称从我的数据库上点击按钮,而不刷新我的页面?我正在建设一个宾果游戏,我试图把一个历史记录按钮,以显示我的数据在下拉的上下文中请参考我下面的代码和帮助!!!
--这是我的history.php文件

<?php

            require_once 'config.php';
            ?>
            <!DOCTYPE html>
            <html>
            <style>
                #rec_mode{
                    background-image: url('register.png');
                    background-size: 100% 100%;
                    width: 100px;
                    height: 50px;
                    border: none;
                    outline: 0px;
                    -webkit-appearance: none;  
                }
            </style>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script>
            history_num_arr = [];
                // For showing latest image from host -- end 
                $(function () {
                    var latestNum;
                    history_num_arr = [];
                    var url = "fetch_num.php";
                    setInterval(function () {
                    tempArr = [];
                    $("#number").load(url);
                    imgNum = jQuery("#number").text();
                    // $("#PostIMG").attr("src", "movie poster/" + imgNum + ".jpg");

                    if (history_num_arr[history_num_arr.length - 1] != imgNum) {
                        history_num_arr.push(imgNum);
                        if (localStorage.getItem("history_num") === null) {
                            localStorage.setItem("history_num", JSON.stringify(history_num_arr));
                    }
                    else if ((history_num_arr.length === 1) && (localStorage.getItem("history_num") != null)) {
                            console.log("hello");
                            tempArr = JSON.parse((localStorage.getItem("history_num")));
                            history_num_arr = JSON.parse(JSON.stringify(tempArr));
                            console.log(history_num_arr);
                            localStorage.setItem("history_num", JSON.stringify(history_num_arr));
                    }
                    else if ((history_num_arr.length > 1) && (localStorage.getItem("history_num") != null)) {
                            console.log(history_num_arr);
                            localStorage.setItem("history_num", JSON.stringify(history_num_arr));
                        }
                    }
                }, 1000);
            });

                // For showing latest image from host -- end 
                $(document).ready(function () {
                    $("#historybtn").click(function () {
                        var url = "history.php";
                        $("#history").load(url);
                        alert(history_num_arr.join(' '));
                    });
                });
            </script>
            <script>
            var myobject = {
                // history : '$history_num_arr'
                };
            var select = document.getElementById("rec_mode");
            for(index in myobject) {
                select.options[select.options.length] = new Option(myobject[index], index);
            }

            </script>
            <body>
                
            <div id="histarr"></div>
            <div id="fetch">
                <p style="display: none;">
                <p style="display: none;" id="number"></p>
                </p>
            </div>
            <div id="history_num">
                <p style="display: none;">
                <p style="display: none;" id="history"></p>
                </p>
            </div>
                <!-- <button id="historybtn" onclick = "">History</button> -->
                <!-- <select name = "select_history" id="dropdown"> --> 
            <select name = "select_history" id="rec_mode">
            <option selected="true" disabled="disabled">
            <?php

            require_once 'config.php';

            // $hist = mysqli_query($mysqli, "SELECT name FROM `movie_names` ORDER BY movieID DESC");
            $hist = mysqli_query($mysqli,"SELECT m.name FROM movie_names m INNER JOIN host_table ht WHERE m.movieID = ht.random_num ORDER BY ID DESC");
            while ($row = $hist->fetch_assoc())
            {
                echo "<option value=\"select_history\">".$row['name']."</option>";
                // exit(0);
            }
            ?>
            </option>
            </select>
                <!-- </select> -->


            </body>
            </html>

--这是我的fetch_num. php文件

<?php 
            require_once 'config.php';
            // $sql = "SELECT  random_num FROM host_table ORDER BY ID DESC LIMIT 1;";
            $sql = "SELECT m.name FROM movie_names m INNER JOIN host_table ht WHERE m.movieID = ht.random_num ORDER BY ID DESC;";
            if($result = mysqli_query($mysqli,$sql)){
                if (mysqli_num_rows($result) > 0) {
                    while($row = mysqli_fetch_array($result)){ 
                        echo $row["name"];

                    }
                }
            }
            else{
                echo "Error".mysqli_error($mysqli);
            }
            ?>

--这是我的config.php文件

<?php

                //Connecting to Database
                $host ="localhost";
                $user = "root";
                $pass ="";
                $db = 'randomized';

                //Creating a connection object
                $mysqli = mysqli_connect($host, $user, $pass, $db);
                echo "<br>";

                if (!$mysqli){
                die("Sorry we failed to connect: ". mysqli_connect_error());
                }
                else{
                    // echo "Connection done!";
                }

            ?>
ljsrvy3e

ljsrvy3e1#

如果你不想重新加载页面,可以用javascript来实现,我们有setinterval函数,每隔一段时间获取setInterval(() => { fetchData().then(data => updateTable(data)) }, 1000);
或通过按钮:

<button class="button-fetch" type="button" onclick="fetchData();">Fetch Data</button>
laximzn5

laximzn52#

通过PHP加载数据后,您将无法动态加载数据,因为加载页面时PHP仅在服务器上运行。
您必须使用fetch API来使用JavaScript发出请求。
例如:

async function loadRecords() {
  const records = await fetch('/records.php');
  return records;
}

有关JavaScript获取api的信息,请参阅MDN文档。https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

llmtgqce

llmtgqce3#

如果你想从服务器获取数据而不重新加载你的网页,有一个非常流行的工具可以做到这一点。它被称为 AJAX (异步Javascript XML)。你可以创建一个单独的PHP文件来处理请求,然后你可以通过AJAX请求从那里获取数据。因为你使用的是JQuery,它可能看起来像这样:

$.ajax({url: /* your php file path */, type="POST", data: {data: /* request information */})
    .done(function(response){
        /* do some DOM manipultion with the response here */
    }
    .fail(function(response){
        console.log(response);
        /* standard function for catching errors */
    }

相关问题