JQuery Ajax调用PHP返回JSON失败，始终触发错误分支求助

问题场景 #

日常使用Ajax+PHP交互无异常，但个人项目中出现以下问题：

• 下拉框选择值后点击按钮，调用showTable函数发送POST请求到index.php
• 后端数据库查询结果正确，但Ajax始终进入错误分支，控制台显示parseerror
• 网络请求状态为200 OK，但错误详情显示返回内容包含完整HTML（开头为<!DOCTYPE>），提示JSON格式无效

核心原因 #

index.php在输出JSON数据的同时，还输出了页面的HTML内容（比如DOCTYPE声明、HTML标签等），导致返回的不是纯JSON字符串。由于前端Ajax请求指定了dataType: "json"，要求返回严格的JSON格式，混入HTML后解析失败，触发parseerror。

解决步骤 #

1. 确保后端只输出纯JSON：移除所有额外输出（包括空格、HTML代码、调试信息等）
2. 清空输出缓冲区：避免之前的代码（如include的文件）产生意外输出
3. 设置正确的响应头：明确告知浏览器返回的是JSON格式
4. 终止脚本执行：输出JSON后立即停止脚本，防止后续代码输出内容
5. SQL注入防护：用户输入的表名必须做白名单验证，禁止直接拼接

修正后的代码示例 #

PHP 后端代码 #

<?php
// 清空输出缓冲区，清除之前的意外输出
ob_clean();

if ($_POST) {
    switch ($_POST["act"]) {
        case 'showTable':
            $token = $_POST["coin"];
            
            // 关键：验证用户输入的币种是否在允许列表中，防止SQL注入
            $allowed_coins = ['btc', 'eth', 'ltc']; // 根据你的实际表名调整
            if (!in_array($token, $allowed_coins)) {
                header('Content-Type: application/json');
                echo json_encode(['error' => '无效的币种参数']);
                exit;
            }

            $token_buy = $token . '_buy';
            $token_sell = $token . '_sell';

            $sql = "SELECT * FROM $token_buy";
            $stmt = $PDO->prepare($sql);
            $stmt->execute();
            $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

            // 设置JSON响应头
            header('Content-Type: application/json');
            echo json_encode($result);
            exit; // 终止脚本，避免后续输出HTML
            break;
    }
}

// 处理非POST请求或无效act参数的情况
header('Content-Type: application/json');
echo json_encode(['error' => '无效请求']);
exit;

前端Ajax代码 #

function showTable() {
    var coin = $('#selectCoin').val();

    $.ajax({
        type: 'POST',
        url: 'index.php',
        dataType: "json",
        data: {
            act: 'showTable',
            'coin' : coin
        },
        success: function(data) {
            console.log('查询结果:', data);
            // 在这里编写构建表格的逻辑
        },
        error: function(jqXhr, status, error) {
            console.error('错误状态:', status);
            console.error('错误信息:', error);
            console.log('后端返回内容:', jqXhr.responseText);
        }
    });
}

额外注意事项 #

• 若index.php是一个完整的HTML页面（包含<html>、<body>等标签），建议单独创建一个API接口文件（如api.php）处理Ajax请求，避免HTML与JSON输出混合
• 检查是否有PHP错误提示被输出到响应中，可关闭display_errors或确保错误信息不混入响应内容

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