蓝极冰焰 2024-04-28 15:56 采纳率: 44.4%
浏览 6
已结题

关于<main>标签页面跳转的问题

我有两个页面：
一个是index.php，里面有load_rc按钮导航，在这个页面中还有一个

标签；还有一个页面是rc.php，在这个页面中，有3个联级下拉菜单，下拉菜单的数据是从数据库中bdh_date表中获取的三个查询数据：date、apm(时段)、place三个字段，通过点选下拉菜单，可以从bdh_date表中获取到日程数据，并显示在下拉菜单下方的Table表格中。现在我想要通过点击index.php中的导航按钮load_rc，使rc.php页面显示在标签中，并且在点击此处的rc.php中的下拉菜单调取数据的时候，可以使它成功获取数据并仍然显示在标签中而不刷新或发生跳转。

以下是两个页面的代码：
首先是index.php的：

<?php
// 启用错误报告
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once './connections/games.php';

// 显示页面内容
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>2024</title>
    <link href="./css/styles.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 加载 rc.php 到 <main> 标签
            $('#load_rc').click(function(e) {
                e.preventDefault();
                $('#main-content').load('rc.php', function() {
                    // rc.php 内容加载完成后的回调函数
                });
            });

            // 处理rc.php中的表单提交
             $('#rc-form').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        // 将查询结果显示在<main>标签中
                        $('#main-content').html(response);
                    },
                    error: function() {
                        alert('查询失败！');
                    }
                });
            });
        });
        function loadDjcx() {
            $.ajax({
                url: 'rc.php',
                success: function(response) {
                    // 将rc.php的内容加载到<main>标签中
                    $('#main-content').html(response);
                },
                error: function() {
                    alert('加载失败！');
                }
            });
        }
    </script>
</head>
<body>
    <div class="app">
    <header class="header">
        <a class="link-logo"><img src="./image/bdh_bg.jpg" width=90% height=100%></a>
    </header>
    <div class="container">
    <div class="nav">
        <button class="button" type="button" id="load_rc">日程 | Schedule</button>
    </div>
        <div class="main">
            <main id="main-content"></main>
        </div>
    </div>
</body>
</html>

然后是rc.php的：

<?php 
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require_once './connections/games.php';
?>
<?php
$stmt = $pdo->prepare('SELECT DISTINCT `date` FROM bdh_date');
$stmt->execute();
$dateList = $stmt->fetchAll(PDO::FETCH_COLUMN);

$selectedDate = isset($_GET['date']) ? $_GET['date'] : '';
$selectedApm = isset($_GET['apm']) ? $_GET['apm'] : '';
$selectedPlace = isset($_GET['place']) ? $_GET['place'] : '';
$selectedOrder = isset($_GET['order']) ? $_GET['order'] : '';

foreach ($dateList as $date) {}

if (!empty($selectedDate)) {
    $apmStmt = $pdo->prepare('SELECT DISTINCT `apm` FROM bdh_date WHERE `date` = :date');
    $apmStmt->bindParam(':date', $selectedDate);
    $apmStmt->execute();
    $apmList = $apmStmt->fetchAll(PDO::FETCH_COLUMN);

    if (!empty($selectedApm)) {
        $placeStmt = $pdo->prepare('SELECT DISTINCT `place` FROM bdh_date WHERE `date` = :date AND `apm` = :apm');
        $placeStmt->bindParam(':date', $selectedDate);
        $placeStmt->bindParam(':apm', $selectedApm);
        $placeStmt->execute();
        $placeList = $placeStmt->fetchAll(PDO::FETCH_COLUMN);

            if (!empty($selectedPlace)) {
            $orderStmt = $pdo->prepare('SELECT DISTINCT `order` FROM bdh_date WHERE `date` = :date AND `apm` = :apm AND `place` = :place');
            $orderStmt->bindParam(':date', $selectedDate);
            $orderStmt->bindParam(':apm', $selectedApm);
            $orderStmt->bindParam(':place', $selectedPlace);
            $orderStmt->execute();
            $orderList = $orderStmt->fetchAll(PDO::FETCH_COLUMN);
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>竞赛日程 | 2024“滑启杯”第十六届北戴河自由式轮滑公开赛</title>
</head>
<body>
    <div class=""><a>竞赛日程 | Schedule</a></div>
    <div class="" style="border-radius: 15px; background-color: #9cc65f";>
        <form id="rc-form" action="" method="get">
            <!-- 第1个下拉框 -->
            <select id="date-select" name="date" onchange="this.form.submit();">
                <option value="">请选择</option>
                <?php foreach ($dateList as $date): ?>
                    <option value="<?php echo htmlspecialchars($date); ?>" <?php echo $date === $selectedDate ? 'selected' : ''; ?>><?php echo htmlspecialchars($date); ?></option>
                <?php endforeach; ?>
            </select>
        
            <!-- 第2个下拉框 -->
            <select id="apm-select" name="apm" onchange="this.form.submit();">
                <option value="">请选择</option>
                <?php foreach ($apmList as $apm): ?>
                    <option value="<?php echo htmlspecialchars($apm); ?>" <?php echo $apm === $selectedApm ? 'selected' : ''; ?>><?php echo htmlspecialchars($apm); ?></option>
                <?php endforeach; ?>
            </select>
        
            <!-- 第3个下拉框 -->
            <select id="place-select" name="place" onchange="this.form.submit();">
                <option value="">请选择</option>
                <?php foreach ($placeList as $place): ?>
                    <option value="<?php echo htmlspecialchars($place); ?>" <?php echo $place === $selectedPlace ? 'selected' : ''; ?>><?php echo htmlspecialchars($place); ?></option>
                <?php endforeach; ?>
            </select>
        </form>
    </div>
        <script>
            function handleSelectChange(event) {
                // 阻止表单的默认提交行为
                event.preventDefault();

                // 获取当前选中的值
                var date = document.getElementById('date-select').value;
                var apm = document.getElementById('apm-select').value;
                var place = document.getElementById('place-select').value;

                // 使用AJAX发送请求到服务器
                $.ajax({
                    url: 'rc.php', // 或者你的服务器端处理逻辑所在的URL
                    type: 'POST', // 或者'POST'，取决于你的服务器端处理逻辑
                    data: {
                        date: date,
                        apm: apm,
                        place: place
                    },
                    success: function(response) {
                        // 假设服务器返回的是表格的HTML内容
                        $('#main-content').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching data", error);
                    }
                });
             }
        </script>
     
<!--选定之后，显示比赛信息区域 -->
<?php
// 确保输入是安全的
$date = $_GET['date'] ?? '';
$apm = $_GET['apm'] ?? '';
$place = $_GET['place'] ?? '';
$order = $_GET['order'] ?? '';

// 从记录集中调取出对应信息
$stmt = $pdo->prepare("
    SELECT 
        `order`,
        now, 
        time, 
        `group`
    FROM 
        bdh_date 
    WHERE 
        `date` = ? AND 
        `apm` = ? AND 
        `place` = ? 
    ORDER BY 
        `order` ASC
");
$stmt->execute([$date, $apm, $place]);
$order = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!--选定之后，显示比赛信息区域 -->
<div name="div_main" class="" style="height:20px;border-radius: 20px; ">    
</div>
    <div name="div_main" class="" style="border-radius: 20px; background-color:#545454;">
    <table class="" style="font-family: inherit;">
        <tr align="center" style="font-weight:bold;font-size:12px;">
         <td>顺序<br>Order</td>
         <td>状态<br>State</td>
         <td>时间<br>Time</td>
         <td>组别<br>Group</td>
         </tr>
         <?php
        foreach ($order as $row):
        ?>
         <tr align="center" style="font-weight:bold;font-size:10px;">
         <td><?php echo htmlspecialchars($row['order']);?></td>
         <td><?php echo htmlspecialchars($row['now']); ?></td>
         <td><?php echo htmlspecialchars($row['time']); ?></td>
         <td><?php echo htmlspecialchars($row['group']); ?></td>
         <td><?php echo htmlspecialchars($row['event']); ?></td>
         </tr>
         <?php
        endforeach;
        ?>
    </table>
</div>
</div>
</body>
</html>
  • 写回答

10条回答 默认 最新

  • bug菌¹ Java领域优质创作者 2024-04-28 20:19
    关注

    该回答引用ChatGPT，望对题主有所帮助/启发；若有帮助，还望采纳🤝🤝🤝

    您的代码逻辑基本上是正确的，但是在rc.php中的JavaScript部分有一些需要调整的地方。以下是修改后的代码和解释：

    修改后的rc.php中的JavaScript部分：

    <script>
    // 为每个下拉框添加 onchange 事件处理程序
    document.getElementById('date-select').addEventListener('change', handleSelectChange);
    document.getElementById('apm-select').addEventListener('change', handleSelectChange);
    document.getElementById('place-select').addEventListener('change', handleSelectChange);

    function handleSelectChange(event) {
        // 阻止表单的默认提交行为
        event.preventDefault();

        // 获取当前选中的值
        var date = document.getElementById('date-select').value;
        var apm = document.getElementById('apm-select').value;
        var place = document.getElementById('place-select').value;

        // 使用AJAX发送请求到服务器
        var formData = new FormData();
        formData.append('date', date);
        formData.append('apm', apm);
        formData.append('place', place);

        fetch('rc.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            // 假设服务器返回的是表格的HTML内容
            document.getElementById('main-content').innerHTML = data;
        })
        .catch(error => {
            console.error("Error fetching data", error);
        });
    }
</script>

    解释：

    1. 移除表单的默认提交：在rc.php中，移除了form标签的action属性，因为我们将使用JavaScript来处理表单提交。

    2. 添加事件监听器：为每个下拉框添加了change事件的监听器，当下拉框的值改变时，将调用handleSelectChange函数。

    3. 使用fetch API：使用现代的fetch API来代替$.ajax调用。fetch API返回一个Promise，可以链式调用.then()和.catch()来处理响应和错误。

    4. **使用FormData**：创建了一个FormData对象来收集表单数据，并将其作为请求体发送。

    5. **更新main-content**：在成功获取响应后，使用document.getElementById('main-content').innerHTML = data;来更新index.php中的<main>标签的内容。

    注意事项：

    • 确保rc.php能够正确处理POST请求，并返回相应的HTML内容。
    • 如果rc.php中的查询逻辑需要GET参数，您可能需要调整fetch请求的URL和方法。
    • 在实际部署时，确保服务器配置了适当的CORS策略，以允许从index.php所在的域进行跨域请求。

    通过这些修改，当用户在rc.php中选择不同的下拉框选项时，页面将不会刷新，而是通过AJAX请求更新main-content的内容。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(9条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月28日
  • 已采纳回答 4月28日
  • 创建了问题 4月28日

悬赏问题

  • ¥15 ats2837 spi2从机的代码
  • ¥200 wsl2 vllm qwen1.5部署问题
  • ¥100 有偿求数字经济对经贸的影响机制的一个数学模型，弄不出来已经快要碎掉了
  • ¥15 这个公式写进SIMULINK中的function模块的代码中应该是什么样的
  • ¥15 数学建模数学建模需要
  • ¥15 已知许多点位，想通过高斯分布来随机选择固定数量的点位怎么改
  • ¥20 nao机器人语音识别问题
  • ¥15 怎么生成确定数目的泊松点过程
  • ¥15 layui数据表格多次重载的数据覆盖问题
  • ¥15 python点云生成mesh精度不够怎么办