PHP动态联动下拉菜单加载异常问题排查求助

我尝试构建类似「国家>>城市」的PHP动态联动下拉菜单，但页面加载后第一个菜单一直显示“Loading...”，第二个显示“Select Part Number”，无法从1form.php获取数据。已排查多日无进展，附上相关代码及数据库结构，请求帮忙找出问题。

数据库结构 #

CUSTCODE表 #

PARTNUMBERS表 #

核心问题汇总 #

1. AJAX请求类型不匹配：1form.php无POST参数接收逻辑，但前端用了type: "POST"，导致后端无法正常返回数据
2. 前端选择器拼写错误：part函数里的$('#secondDLModel').empty();是错误ID，应为secondDDLModel
3. SQL注入风险：2form.php直接拼接$_GET["ID1"]到SQL语句，且未处理空参数情况
4. 冗余的请求头设置：前端POST请求设置contentType: "application/json"，但未发送JSON数据，反而导致解析异常
5. 字段名不匹配：2form.php返回的tiedto字段在数据库中不存在，应替换为实际存在的ID1字段

修正后的代码 #

1form.php #

<?php
include 'process/database.php';
include 'header.php'; // 包含session_start();

$sql = mysqli_query($conn, "SELECT * FROM `custcode` ORDER BY `ID2` ASC");
if(mysqli_num_rows($sql)) {
    $data = array();
    while($row = mysqli_fetch_array($sql)) {
        $data[] = array(
            'ID1'       => $row['ID1'],
            'ID2'       => $row['ID2'],
            'ENABLED2'  => $row['ENABLED2'],
            'SOLDTO2'   => $row['SOLDTO2']
        );
    }
    header('Content-type: application/json');
    echo json_encode($data);
} else {
    // 无数据时返回空数组，避免前端报错
    header('Content-type: application/json');
    echo json_encode([]);
}
?>

2form.php #

<?php
include 'process/database.php';
include 'header.php'; // 包含session_start();

// 验证并过滤参数
$id1 = isset($_GET['ID1']) ? intval($_GET['ID1']) : 0;
if($id1 > 0) {
    // 使用预处理语句防止SQL注入
    $stmt = $conn->prepare("SELECT * FROM partnumbers WHERE ID1=?");
    $stmt->bind_param("i", $id1);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $data = array();
    while($row = mysqli_fetch_array($result)) {
        $data[] = array(
            'id'            => $row['id'],
            'partnumber'    => $row['partnumber'],
            'disabled1'     => $row['disabled1'],
            'ID1'           => $row['ID1'] // 替换不存在的tiedto字段
        );
    }
    header('Content-type: application/json');
    echo json_encode($data);
} else {
    header('Content-type: application/json');
    echo json_encode([]);
}
?>

3form.php #

<?php
include 'process/database.php';
include 'header.php';
?>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/JavaScript">
        function customer(){
            $('#firstDDLModel').empty().append("<option>Loading......</option>");
            $('#secondDDLModel').empty().append("<option value='0'>--Select Part Number--</option>");
            $.ajax({
                type: "GET", // 改为GET匹配后端逻辑
                url: "1form.php",
                dataType: "json",
                success: function(data) {
                    $('#firstDDLModel').empty().append("<option value='0'>--Select Customer--</option>");
                    $.each(data,function(i,item) {
                        // 显示客户名称而非ID，提升用户体验
                        $('#firstDDLModel').append('<option value="'+ item.ID1 +'">'+ item.SOLDTO2 +'</option>');
                    });            
                },
                error: function(xhr, status, error) {
                    // 增加错误提示，方便排查
                    $('#firstDDLModel').empty().append("<option>加载失败</option>");
                    console.log("AJAX错误: " + error);
                }
            });
        }

        function part(ID1){
            if(ID1 == 0) {
                $('#secondDDLModel').empty().append("<option value='0'>--Select Part Number--</option>");
                return;
            }
            $('#secondDDLModel').empty().append("<option>Loading......</option>");
            $.ajax({
                type: "GET", // 参数在URL中传递，用GET更合理
                url: "2form.php?ID1="+ID1,
                dataType: "json",
                success: function(data) {
                    $('#secondDDLModel').empty().append("<option value='0'>--Select Part--</option>");
                    $.each(data,function(i,item) {
                        $('#secondDDLModel').append('<option value="'+ item.id +'">'+ item.partnumber +'</option>');
                    });            
                },
                error: function(xhr, status, error) {
                    $('#secondDDLModel').empty().append("<option>加载失败</option>");
                    console.log("AJAX错误: " + error);
                }
            });
        }

        $(document).ready(function(){
            customer();
            $("#firstDDLModel").change(function() {
                var ID1 = $("#firstDDLModel").val();
                part(ID1);
            });
        });
    </script>
</head>
<body>
    <span>Customer</span>
    <select id="firstDDLModel"></select>
    <span>Part</span>
    <select id="secondDDLModel"></select>
</body>
</html>

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