我有一个页面是j_center.php，包含一个
标签，里面可以加载显示jl.php等其他文件内容，在jl.php文件中，通过登录的用户名调取到m_date表中的judge_un字段的对应数据，其中有一个字段是now，用以更新日程状态，
在调取出来的表格中，在now一列，调取初始now状态数据，并且添加下拉菜单：已结束、即将开始、正在进行3个下拉菜单，通过选择的下拉菜单，提交更新到m_date表中，更新now字段数据，并使这些数据更新和显示在jl.php页面中，但不使页面发生跳转，以下是jl.php页面代码和j_center.php页面代码，请各位帮我看看有什么问题，为什么无法提交和更新数据？谢谢
jl.php页面如下：
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once './connections/games.php';
session_start();
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && isset($_SESSION['username'])) {
$username = $_SESSION['username'];
$sql = "SELECT username FROM judges WHERE username = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$username]);
$username_row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($username_row) {
$username = $username_row['username'];
// 调取裁判用户名作为索引
} else {
echo "没有找到匹配的用户信息。";
}
} else {
header("Location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table {
width: 100%; /* 表格宽度为100% */
border-collapse: collapse; /* 边框合并为一个单一的边框 */
margin-bottom: 20px; /* 表格底部外边距 */
background:#777;
}
/* 表格头部样式 */
th {
background-color: #333; /* 表头背景色 */
color: #fff; /* 表头文字颜色 */
padding: 10px; /* 内边距 */
text-align: center; /* 文字左对齐 */
}
/* 表格行样式 */
tr:nth-child(even) {
background-color: #555; /* 偶数行背景色 */
}
/* 表格数据样式 */
td {
padding: 8px; /* 内边距 */
border: 1px solid #ddd; /* 边框 */
font-size: 12px; /* 文字尺寸 */
}
/* 鼠标悬停样式 */
tr:hover {
background-color: #e5e5e5; /* 鼠标悬停时背景色 */
color: #333;
}
</style>
<title></title>
</head>
<body>
<!--选定之后，显示信息区域 -->
<p></p>
<?php
$sql = "
SELECT *
FROM
m_date
WHERE
judge_un = :judge_un
ORDER BY
`order` ASC
";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':judge_un', $username); // 使用绑定参数来避免SQL注入
$stmt->execute();
$order = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!--选定之后，显示信息区域 -->
<p></p>
<h3>日程 | Date</h3>
<a>共有项，已完成项，还有项待完成</a>
<div style="border-radius: 20px; background-color:#F8F8F8;">
<form id="updateForm">
<table style="font-family: inherit;color:#FFF">
<tr align="center" style="font-weight:bold;font-size:12px;">
<th>顺序<br>Order</th>
<th>状态<br>State</th>
<th>组别<br>Group</th>
<th>项目<br>Event</th>
</tr>
<?php
foreach ($order as $row):
?>
<tr align="center" style="font-weight:bold;font-size:10px;">
<td><?php echo htmlspecialchars($row['order']);?></td>
<td>
<select id="now_<?php echo $row['id']; ?>" name="now_<?php echo $row['id']; ?>">
<option value="已完成" <?php echo ($row['now'] == '已完成') ? 'selected' : ''; ?>>已完赛</option>
<option value="进行中" <?php echo ($row['now'] == '进行中') ? 'selected' : ''; ?>>正在进行</option>
<option value="即将开始" <?php echo ($row['now'] == '即将开始') ? 'selected' : ''; ?>>即将开始</option>
</select>
<button type="button" class="updateButton" data-id="<?php echo $row['id']; ?>">更新</button>
</td>
<td><?php echo htmlspecialchars($row['group']); ?></td>
<td><?php echo htmlspecialchars($row['event']); ?></td>
</tr>
<?php
endforeach;
?>
</table>
</form>
<div id="message"></div> <!-- 用于显示消息 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 绑定点击事件到每一个更新按钮上
$('.updateButton').on('click', function() {
var button = $(this); // 获取当前点击的按钮的jQuery对象
var id = button.data('id'); // 获取按钮的data-id属性值
var select = $('#now_' + id); // 获取对应的下拉选择框的jQuery对象
var newValue = select.val(); // 获取下拉选择框的当前值
$.ajax({
url: 'update_status.php', // 假设这是处理状态更新的PHP文件
type: 'POST',
data: {
id: id,
now: newValue
},
dataType: 'json',
success: function(response) {
if (response.status === 'success') {
// 更新成功，可以在这里添加代码来更新页面上的显示
alert('状态已成功更新为：' + newValue);
// 如果需要，可以调用refreshDataInJCenter()函数来刷新j_center.php页面的数据
} else {
alert('状态更新失败：' + response.message);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert('发生错误：' + textStatus);
}
});
});
// 刷新j_center.php页面数据的函数（如果需要的话）
function refreshDataInJCenter() {
// 发送Ajax请求到j_center.php以获取新数据，并更新<main>标签的内容
// ...（具体实现取决于您的j_center.php页面的逻辑）
}
});
</script>
</div>
</div>
</body>
</html>
j_center.php页面如下：
<?php
// 启用错误报告
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once './connections/games.php';
// 启动会话
session_start();
// 检查用户是否已登录
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && isset($_SESSION['username'])) {
$username = $_SESSION['username'];
// 准备SQL查询语句
$sql = "SELECT * FROM judges WHERE username = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$username]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
// 检查是否获取到用户信息
if ($user) {
} else {
// 没有找到匹配的用户信息
echo "没有找到匹配的用户信息。";
}
} else {
// 用户未登录，重定向到登录页面
header("Location: login.php");
exit;
}
// 检查会话中是否有选中的数据
if (isset($_SESSION['selected_data']) && is_array($_SESSION['selected_data'])) {
// 获取选中的数据
$selectedData = $_SESSION['selected_data'];
// 清除会话中的数据（可选，如果你不想在后续请求中重复使用这些数据）
unset($_SESSION['selected_data']);
} else {
// 如果没有选中的数据，设置一个空数组或进行其他处理
$selectedData = array();
}
// 显示页面内容
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CPZX</title>
<link rel="icon" href="image/logof.png" type="image/png">
<link href="../css/judges.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 加载 grxx.php 到 <main> 标签
$('#load_grxx').click(function(e) {
e.preventDefault();
$('#main-content').load('grxx.php', function() {
// grxx.php 内容加载完成后的回调函数
});
});
// 加载 zcjl.php 到 <main> 标签
$('#load_zcjl').click(function(e) {
e.preventDefault();
$('#main-content').load('zcjl.php', function() {
// zcjl.php 内容加载完成后的回调函数
});
});
});
</script>
</head>
<body>
<div class="app">
<header class="header">
<span><h1>CPZX</h1></span>
</header>
<div class="container">
<aside class="left">
<div role="group" aria-label="Button group with nested dropdown">
<button class="button" type="button" id="load_grxx">GRXX<br>Personal</button>
<div class="dropdown">
<button class="dropdown-button button" type="button" id="load_zczx">ZCZX<br>Referee position</button>
<ul class="dropdown-content"> <!-- 使用<ul>代替<div>以更好地表示列表结构 -->
<li><a href="#" onclick="loadContent('jl.php')">● JL</a></li>
<li><a href="#" onclick="loadContent('xg.php')">● XG</a></li>
<li><a href="#" onclick="loadContent('pf.php')">● PF</a></li>
</ul>
</div>
<button class="button" type="button" id="load_zcjl">ZCJL<br>curriculum vitae</button>
<button class="button" type="button" onclick="window.location.href='index.php';">退出登录<br>Login Out</button>
</div>
</aside>
<div class="main">
<div style="background:#ededed">欢迎登录！<b><?php echo htmlentities($user['realname']) ; ?></b>
<?php
if ($user) {
$beginDate = $user['reg_time'];
$startDate = new DateTime($beginDate);
$currentDate = new DateTime();
$interval = $startDate->diff($currentDate);
$years = $interval->y;
$days = $interval->days;
if ($days >= 365) {
$extraYears = floor($days / 365);
$days %= 365;
}
echo $years . "年" . ($days > 0 ? $days . "天；" : "");
} else {
echo "No begin_date found for user ID $userId";
}
?>，来自<?php echo htmlentities($user['area']); ?>-<?php echo htmlentities($user['city']); ?>
</div>
<main id="main-content">
</main>
</div>
</div>
</div>
<script>
function loadContent(page) {
// 获取<main>标签
var content = document.getElementById('main-content');
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求完成时的回调函数
xhr.onload = function() {
if (xhr.status === 200) {
// 请求成功，将返回的内容加载到<main>标签中
content.innerHTML = xhr.responseText;
} else {
// 请求失败，显示错误信息
content.innerHTML = 'Error loading the page.';
}
};
// 发起GET请求到指定页面
xhr.open('GET', page, true);
xhr.send();
// 阻止默认的链接跳转行为
return false;
}
</script>
</body>
</html>
