点击按钮触发PHP取数及jQuery切换div显示失效问题排查

异常1：点击按钮后按钮消失、PHP查询逻辑未执行 #

• 按钮未阻止默认行为：若按钮放在form标签内，点击后会触发表单默认提交跳转，页面刷新导致按钮看起来消失
• toggle方法选择器匹配错误：按钮和结果div存在id重复问题，toggle操作误选中按钮本身，直接把按钮隐藏
• 事件绑定逻辑未生效：script标签未闭合、jQuery引入路径错误，导致点击事件代码根本没执行
• 缺失AJAX请求逻辑：点击事件里只写了toggle操作，没有发起对PHP接口的异步请求，后端逻辑自然不会触发

异常2：getJSON拿到数据后无法渲染到表格 #

• DOM选择器不匹配：代码里写的表格选择器和实际HTML里的表格id不一致，找不到渲染目标
• HTML结构错误：动态拼接的行直接追加到table节点下，没有放到tbody内，导致表格结构错乱不显示
• JSON解析失败：PHP接口返回的内容夹带多余输出（警告信息、调试打印内容、BOM头），不是标准JSON格式，前端解析失败不进入成功回调
• jQuery语法错误：拼接表格行时引号不配对、转义错误，导致JS运行中断

1. HTML结构（修正id重复、标签闭合问题） #

所有DOM元素id全局唯一，script标签按规范闭合，表格预留专门的动态内容容器：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>待出租公寓查询</title>
    <!-- 引入本地存放的jQuery文件，确保路径正确 -->
    <script src="/js/jquery.min.js"></script>
</head>
<body>
<!-- 按钮id独立，不与其他元素重名 -->
<button id="queryAptBtn">查询待出租公寓</button>

<!-- 结果容器div默认隐藏，id与按钮明确区分 -->
<div id="aptResultDiv" style="display: none; margin-top: 20px;">
    <table border="1" cellpadding="8" cellspacing="0">
        <thead>
            <tr>
                <th>公寓ID</th>
                <th>公寓名称</th>
                <th>面积(㎡)</th>
                <th>月租金(元)</th>
                <th>地址</th>
            </tr>
        </thead>
        <!-- 动态内容统一追加到tbody，避免表格结构错乱 -->
        <tbody id="aptTableBody"></tbody>
    </table>
</div>

<script>
// 前端交互逻辑写在此处，script标签必须完整闭合
</script>
</body>
</html>

2. 前端jQuery逻辑（修正事件绑定、AJAX、选择器、渲染问题） #

正确阻止默认事件，toggle目标精准匹配结果容器，按规范发起AJAX请求，正确渲染表格行：

$(function () {
    // 绑定点击事件，选择器与按钮id完全一致
    $('#queryAptBtn').on('click', function (e) {
        // 阻止默认提交/跳转行为
        e.preventDefault();

        // 切换结果容器显示状态，选择器严格匹配结果div的id，避免误选按钮
        $('#aptResultDiv').toggle();

        // 仅在结果容器显示时发起数据请求，减少无效请求
        if($('#aptResultDiv').is(':visible')){
            // 发起AJAX请求PHP接口，补全之前缺失的请求逻辑
            $.getJSON('get_apartments.php', function (res) {
                const $tbody = $('#aptTableBody');
                // 先清空旧数据再追加新内容
                $tbody.empty();

                // 遍历返回数据拼接表格行，注意引号配对
                $.each(res, function (index, item) {
                    const tr = `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.apt_name}</td>
                            <td>${item.area}</td>
                            <td>${item.rent}</td>
                            <td>${item.address}</td>
                        </tr>
                    `;
                    $tbody.append(tr);
                });
            }).fail(function () {
                alert('数据获取失败，请检查接口服务状态');
            });
        }
    })
})

3. 后端PHP逻辑（修正JSON返回格式问题） #

基于PDO查询数据，返回标准JSON格式，禁止接口响应夹带非JSON内容：

<?php
// 接口文件 get_apartments.php
// 数据库配置项替换为实际环境参数
$host = 'localhost';
$dbname = 'your_database';
$dbuser = 'your_account';
$dbpwd = 'your_password';

// 设置响应头为JSON格式
header('Content-Type: application/json; charset=utf-8');
// 屏蔽错误输出，避免破坏JSON结构
error_reporting(0);

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $dbuser, $dbpwd);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 查询待出租状态的公寓数据
    $stmt = $pdo->prepare("SELECT id, apt_name, area, rent, address FROM apartments WHERE rent_status = :status");
    $stmt->execute([':status' => 1]);
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // 输出JSON后直接终止程序，避免后续多余内容污染响应
    echo json_encode($data, JSON_UNESCAPED_UNICODE);
} catch (PDOException $e) {
    echo json_encode(['code' => 500, 'msg' => '数据库查询异常']);
}
exit;
?>

• 所有DOM元素id全局唯一，无重名冲突
• jQuery文件路径可正常访问，所有script标签完整闭合
• 后端接口返回内容为纯JSON，无BOM头、警告信息、调试打印内容
• 表格动态内容全部追加到tbody节点内，不直接拼接到table下
• 点击事件内必须调用e.preventDefault()阻止默认行为

内容的提问来源于stack exchange，提问作者Stephen