当前位置： 文江博客话题详情

有没有一种方法可以从数据库获取记录而不重新加载页面

发布于 2025-01-15 08:10:10 字数 6155 浏览 0 评论 0原文

如何通过单击按钮从数据库中获取数据（即电影名称）而不刷新页面？我正在构建一个宾果游戏，我试图在其中放置一个历史记录按钮以在下拉菜单中显示我的数据请参阅我的下面的代码和帮助！

--这是我的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!";
                }

            ?>
原文

How do I fetch my data i.e. movie names from my database on the click of button without refreshing my page ? I am building a Bingo game where I am trying to put an history record button to display my data in the context of a drop down Please refer to my below code and help!!!

--This is my history.php file

            <?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>

-- This is my fetch_num.php file

            <?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);
            }
            ?>

--This is my config.php file

            <?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!";
                }

            ?>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

甜嗑 2025-01-22 08:10:10

如果您不想重新加载页面，可以使用 javascript 来完成此操作，我们有 setinterval 函数每隔一段时间就获取一次
setInterval(() => { fetchData().then(data => updateTable(data)) }, 1000);

或通过按钮：

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

It is possible to do it with javascript if you don't want to reload the page we have setinterval function to fetch every some time
setInterval(() => { fetchData().then(data => updateTable(data)) }, 1000);

or through buttons:

<button class="button-fetch" type="button" onclick="fetchData();">Fetch Data</button>
回复 原文
奈何桥上唱咆哮 2025-01-22 08:10:10

通过 PHP 加载数据后，您将无法动态加载数据，因为 PHP 仅在加载页面时在服务器上运行。

您必须使用 fetch API 通过 JavaScript 发出请求。

例如：

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

有关 JavaScript fetch api 的信息，请参阅 MDN 文档。
https://developer.mozilla.org/en-US/docs/网络/API/Fetch_API

You won't be able to dynamically load data after it's loaded through PHP, as the PHP is only run on the server when you load the page.

You'll have to use the fetch API to make a request using JavaScript.

For example:

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

See the MDN docs for information on the JavaScript fetch api.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

回复 原文
恋竹姑娘 2025-01-22 08:10:10

如果您想从服务器获取数据而不重新加载网页，那么有一个非常流行的工具。它称为 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 */
    }

If you want to fetch data from servers without reloading your webpage there is a very populair tool for that. It is called AJAX (Asynchronous Javascript XML).
You could create a seperate PHP file that handles the requests and then you can fetch the data from there via an AJAX request. Because you're using JQuery it could look something like this:

$.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 */
    }
回复 原文
~没有更多了~

关于作者

桜花祭

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

hncloud

文章 0 评论 0

13545243122

文章 0 评论 0

探春

文章 0 评论 0

樱桃奶球

文章 0 评论 0

LR

文章 0 评论 0

J.smile

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文