【发布时间】：2022-11-29 13:36:48
【问题描述】：
如何在不刷新页面的情况下单击按钮从我的数据库中获取我的数据，即电影名称？我正在构建一个宾果游戏，我试图在其中放置一个历史记录按钮以在下拉菜单的上下文中显示我的数据请参考我下面的代码和帮助！
--这是我的 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!";
}
?>
【问题讨论】：
-
一种解决方案是使用浏览器的 indexedDB
标签： javascript php jquery arrays ajax