问：如何在不刷新页面的情况下单击按钮从数据库中获取我的数据，即电影名称？我正在构建一个宾果游戏，我试图在其中放置一个历史记录按钮以在下拉上下文中显示我的数据请参考我下面的代码和帮助！！！
--这是我的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!";
}
?>
答：通过 PHP 加载数据后，您将无法动态加载数据，因为 PHP 仅在您加载页面时在服务器上运行。
您必须使用 fetch API 来使用 JavaScript 发出请求。
例如：
async function loadRecords() {
const records = await fetch('/records.php');
return records;
}
