JQuery Ajax请求返回PHP代码而非结果，遇'<'截断问题求助

核心问题：Ajax返回PHP代码且截断 #

原因及解决 #

1. 服务器未解析PHP文件：确认Ajax请求的php_mysql_table_result.php路径完全正确（比如HTML和PHP都在根目录时，URL写"php_mysql_table_result.php"）。若路径无误，检查服务器是否将.php文件交给PHP处理器解析（如Apache需加载mod_php模块，Nginx需配置fastcgi_pass指向PHP-FPM）。
2. 浏览器HTML解析导致截断：若服务器返回PHP源码，插入到innerHTML时，源码中的<会被浏览器当作HTML标签起始符，导致前面内容被隐藏。解决服务器解析问题后，返回的是HTML表格，该问题会自动消失。

代码优化细节 #

HTML/JQuery代码修正 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
    <h1>AJAX TEST</h1>
    <form id="coordinatesearch">
        <label for="maxLatInput">Search Coordinates:</label><br>
        <input 
            id="maxLatInput" 
            type="number" 
            step="any"
            placeholder="Max Latitude">
            
        <input 
            id="minLatInput" 
            type="number" 
            step="any"
            placeholder="Min Latitude">
            
        <input 
            id="maxLongInput" 
            type="number" 
            step="any"
            placeholder="Max Longitude">
            
        <input 
            id="minLongInput" 
            type="number" 
            step="any"
            placeholder="Min Longitude">
            
        <button type="button" onClick="filterCoordinates()">Submit</button>
    </form>

    <p>Results: <br></p>
    <div id="ajaxresults">Results Here</div>

    <script>
        function filterCoordinates() {
            // 用value获取输入框内容，而非innerHTML
            var minLatitude = document.getElementById("minLatInput").value;
            var maxLatitude = document.getElementById("maxLatInput").value;
            var minLongitude = document.getElementById("minLongInput").value;
            var maxLongitude = document.getElementById("maxLongInput").value;
            
            $.ajax({
                type: "GET",
                url: "php_mysql_table_result.php",
                // 移除同步请求，默认异步避免阻塞浏览器
                data: {
                    "minLatitude": minLatitude,
                    "maxLatitude": maxLatitude,
                    "minLongitude": minLongitude,
                    "maxLongitude": maxLongitude
                },
                success: function(data) {                    
                    document.getElementById("ajaxresults").innerHTML = data;
                },
                // 错误处理改为函数，便于调试
                error: function(xhr, status, err) {
                    console.log("请求错误:", err);
                    document.getElementById("ajaxresults").innerHTML = "请求失败，请检查参数或服务器";
                }
            });
        }
    </script>
</body>
</html>

修正点：

• 修复表单嵌套错误，将按钮放在表单内，移除多余</form>
• 输入框类型改为number+step="any"，支持小数输入
• 用value替代innerHTML获取用户输入
• 移除async: false，避免阻塞浏览器
• 修正按钮onClick的引号缺失问题
• 修复<label>标签未闭合错误
• 优化Ajax错误处理逻辑

PHP代码修正 #

<?php
// Include Config File
require_once "config.php";
// 建议在config.php中添加：设置PDO错误模式为异常
// $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 从GET请求获取参数，为空时设默认值
$minlatitude = $_GET['minLatitude'] ?? '';
$maxlatitude = $_GET['maxLatitude'] ?? '';
$minlongitude = $_GET['minLongitude'] ?? '';
$maxlongitude = $_GET['maxLongitude'] ?? '';

// SQL表名`database`是关键字，用反引号包裹
$sql = "SELECT registration_number, entity_name, latitude, longitude, structure_type, height_of_structure, status_code
    FROM `database`
    WHERE latitude >= :minlatitude AND  
    latitude <= :maxlatitude AND
    longitude >= :minlongitude AND
    longitude <= :maxlongitude;";

$sth = $conn->prepare($sql);
// 参数绑定，数值类型用PARAM_STR或PARAM_INT均可
$sth->bindValue(':minlatitude', $minlatitude, PDO::PARAM_STR);
$sth->bindValue(':maxlatitude', $maxlatitude, PDO::PARAM_STR);
$sth->bindValue(':minlongitude', $minlongitude, PDO::PARAM_STR);
$sth->bindValue(':maxlongitude', $maxlongitude, PDO::PARAM_STR);

try {
    $sth->execute();
    $data = $sth->fetchAll(PDO::FETCH_ASSOC);

    // 修正表格结构：<th>放在<tr>内部
    echo "<table border='1'>
        <tr>
            <th>Registration Number</th>
            <th>Entity Name</th>
            <th>Latitude</th>
            <th>Longitude</th>
            <th>Structure Type</th>
            <th>Structure Height (ft)</th>
            <th>Status Code</th>
        </tr>";

    foreach($data as $row) { 
        // 用htmlspecialchars转义输出，防止XSS攻击
        echo "<tr>
            <td>" . htmlspecialchars($row['registration_number']) . "</td>
            <td>" . htmlspecialchars($row['entity_name']) . "</td>
            <td>" . htmlspecialchars($row['latitude']) . "</td>
            <td>" . htmlspecialchars($row['longitude']) . "</td>
            <td>" . htmlspecialchars($row['structure_type']) . "</td>
            <td>" . htmlspecialchars($row['height_of_structure']) . "</td>
            <td>" . htmlspecialchars($row['status_code']) . "</td>
        </tr>";
    }

    echo "</table>";
} catch(PDOException $e) {
    // 捕获异常，输出错误信息（生产环境请勿输出详细错误）
    echo "查询错误: " . $e->getMessage();
}
?>

修正点：

• 从GET请求中获取参数，避免未定义变量错误
• 表名database用反引号包裹，避免关键字冲突
• 改用try-catch捕获PDO异常，错误处理更可靠
• 修正表格HTML结构，符合规范
• 输出数据时用htmlspecialchars()转义，防止XSS攻击
• 给表格添加边框，便于查看结果（可选）

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