我如何获取我的数据,即电影名称从我的数据库上点击按钮,而不刷新我的页面?我正在建设一个宾果游戏,我试图把一个历史记录按钮,以显示我的数据在下拉的上下文中请参考我下面的代码和帮助!!!
--这是我的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!";
}
?>
3条答案
按热度按时间ljsrvy3e1#
如果你不想重新加载页面,可以用javascript来实现,我们有setinterval函数,每隔一段时间获取
setInterval(() => { fetchData().then(data => updateTable(data)) }, 1000);
或通过按钮:
laximzn52#
通过PHP加载数据后,您将无法动态加载数据,因为加载页面时PHP仅在服务器上运行。
您必须使用fetch API来使用JavaScript发出请求。
例如:
有关JavaScript获取api的信息,请参阅MDN文档。https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
llmtgqce3#
如果你想从服务器获取数据而不重新加载你的网页,有一个非常流行的工具可以做到这一点。它被称为 AJAX (异步Javascript XML)。你可以创建一个单独的PHP文件来处理请求,然后你可以通过AJAX请求从那里获取数据。因为你使用的是JQuery,它可能看起来像这样: