动态级联下拉框无法从第二个数据库获取数据的技术求助

我正在开发基于Web的动态表单，采用PHP+AJAX+JavaScript实现，部署在内网。目前第一个#bodyman制造商下拉框可正常从数据库填充，但无法根据其选择结果填充#bodytype铺路砖类型下拉框，更无法继续填充#bodycolor颜色下拉框。已确认config.php功能正常，bodyman_id能正确获取输入值，但始终无法从数据库返回对应产品数据。数据库设计：制造商ID为数字类型，铺路砖类型表设有对应制造商编号的关联字段。

核心错误点 #

• AJAX请求方法语法错误：JavaScript中xhttp.open("$_POST","ajaxfile.php", true);误用PHP变量，应改为字符串"POST"
• 前后端参数名不匹配：AJAX发送参数为bodyman_id，但后端PHP判断的是$postData->ID，导致无法接收有效参数
• SQL未按制造商筛选：后端SQL查询未根据传入的制造商ID过滤数据，返回的是所有铺路砖类型而非对应制造商的结果
• 响应解析与DOM操作错误：JavaScript中错误尝试用response.stringValue获取数组长度，且创建option时把字符串"id"、"name"赋值，而非变量本身
• SQL预处理绑定参数缺失：$stmt->bind_param();未传入参数类型与参数，导致预处理无效

修正后的代码 #

HTML部分 #

<?php 
$sql = "SELECT * FROM hardscapemfr where Pavers IS NOT NULL AND Pavers<>'';";
$stmt = $con->prepare($sql);
$stmt->execute();
$result=$stmt->get_result(); 
?>
<div class="col-2">
    <label>Manufacturer</label>
    <select id="bodyman" onChange="getPavers(this.value);">
        <option value="0">N/A</option>
        <?php
        while ($row = $result->fetch_assoc()){
            $id=$row['ID'];
            $name=$row['Pavers'];
            echo "<option value='".$id."'>".$name."</option>";
        }
        ?>
    </select>
</div>
<div class="col-2">
    <label>Paver Type</label>
    <select id="bodytype" onChange="getColor(this.value);">
        <option value="0">Select Type</option>
    </select>
</div>
<div class="col-2">
    <label>Color</label>
    <select id="bodycolor" style="width: auto">
        <option value="0">Select Color</option>
    </select>
</div>
<div class="col-2">
    <label>Orientation</label>
    <select id="bodyorientation" style="width: auto">
        <option value="N/A">N/A</option>
        <option value="Running Bond">Running Bond</option>
        <option value="Herringbone">Herringbone</option>
        <option value="Circular">Circular</option>
        <option value="Basket Weave">Basket Weave</option>
    </select>
</div>

JavaScript部分 #

function getPavers(bodyman_id) {
    var paverel = document.getElementById('bodytype');
    var colorel = document.getElementById('bodycolor');
    
    paverel.innerHTML = "";
    colorel.innerHTML = "";
    
    var paveropt = document.createElement('option');
    paveropt.value = 0;
    paveropt.innerHTML = '--Select Paver--';
    paverel.appendChild(paveropt);
    
    var coloropt = document.createElement('option');
    coloropt.value = 0;
    coloropt.innerHTML = '--Select Color--';
    colorel.appendChild(coloropt);
    
    if (bodyman_id == 0) return; // 选择N/A时直接终止
    
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "ajaxfile.php", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            try {   
                var response = JSON.parse(this.responseText);
            } catch (error) {
                console.log("Error parsing JSON:", error);
                return;
            }
            
            if (response.length > 0) {
                for(var i = 0; i < response.length; i++) {
                    var id = response[i].ID;
                    var name = response[i].Pavers;
                    
                    var opt = document.createElement('option');
                    opt.value = id;
                    opt.innerHTML = name;
                    paverel.appendChild(opt);
                }
            }
        }
    };
    var data = {request: 'getPavers', bodyman_id: bodyman_id};
    xhttp.send(JSON.stringify(data));
}

AJAX后端文件（ajaxfile.php） #

<?php
include 'config.php';

$postData = json_decode(file_get_contents("php://input"));
$request = "";
if(isset($postData->request)){
    $request = $postData->request;
}

// 获取对应制造商的铺路砖类型
if($request == 'getPavers'){
    $data = array();
    if(isset($postData->bodyman_id) && $postData->bodyman_id != 0){
        $bodyman_id = $postData->bodyman_id;
        // 注意：需将`mfr_id`替换为你belgard表中实际存储制造商ID的字段名
        $sql = "SELECT ID, Pavers FROM belgard WHERE mfr_id = ? AND Pavers IS NOT NULL AND Pavers<>'';";
        $stmt = $con->prepare($sql);
        $stmt->bind_param("i", $bodyman_id); // i表示整数类型参数
        $stmt->execute();
        $result = $stmt->get_result();
        
        while ($row = $result->fetch_assoc()){
            $data[] = array(
                "ID" => $row['ID'],
                "Pavers" => $row['Pavers']
            );
        }
    }
    echo json_encode($data);
    die;
}

额外说明 #

• 需根据实际数据库表结构，将后端SQL中的mfr_id替换为belgard表中关联制造商ID的真实字段名
• 若要实现#bodycolor的级联加载，可参照上述逻辑，创建getColor函数及对应的后端处理分支，根据铺路砖类型ID筛选颜色数据

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