级联下拉菜单失效排查：AJAX数据传递逻辑错误咨询

1. 确认后端接口输出格式 #

首先确保你的BuildingsListJson接口返回标准JSON格式的建筑列表。以ASP.NET为例，接口代码应类似：

using Inventory.Models; // 引入Building类所在的命名空间
using Microsoft.AspNetCore.Mvc;

public class CampusController : Controller
{
    public IActionResult BuildingsListJson(string campusId)
    {
        // 替换为你实际的建筑数据获取逻辑（根据选中的校园ID筛选）
        IEnumerable<Building> buildings = GetBuildingsForCampus(campusId);
        return Json(buildings); // 将IEnumerable<Building>序列化为JSON返回
    }

    // 示例数据获取方法（仅作演示）
    private IEnumerable<Building> GetBuildingsForCampus(string campusId)
    {
        // 这里模拟从数据库或其他数据源获取数据
        return new List<Building>
        {
            new Building { BuildingNum = "B01", Name = "图书馆" },
            new Building { BuildingNum = "B02", Name = "教学楼A" }
        };
    }
}

接口返回的JSON结构会自动匹配Building类的字段，比如：

[{"BuildingNum":"B01","Name":"图书馆"},{"BuildingNum":"B02","Name":"教学楼A"}]

2. 前端AJAX调用与数据传递 #

使用原生AJAX（适合新手理解基础逻辑）监听校园下拉框的change事件，请求接口后将解析的JSON数据直接传入填充函数：

// 绑定校园下拉框的选择事件
document.getElementById("CampusDropdown").addEventListener("change", function() {
    const selectedCampusId = this.value;
    
    // 若未选择校园，清空建筑下拉框
    if (!selectedCampusId) {
        populateBuildingDropdown([]);
        return;
    }

    // 初始化AJAX请求
    const xhr = new XMLHttpRequest();
    xhr.open("GET", `/Campus/BuildingsListJson?campusId=${selectedCampusId}`, true);
    xhr.setRequestHeader("Accept", "application/json");

    // 请求成功回调
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 将返回的JSON字符串解析为JavaScript数组
            const buildings = JSON.parse(xhr.responseText);
            // 直接将解析后的数据传递给填充函数
            populateBuildingDropdown(buildings);
        } else {
            console.error("获取建筑列表失败：", xhr.statusText);
            populateBuildingDropdown([]);
        }
    };

    // 请求出错回调
    xhr.onerror = function() {
        console.error("请求接口出错");
        populateBuildingDropdown([]);
    };

    xhr.send();
});

3. 实现建筑下拉框填充函数 #

populateBuildingDropdown函数接收建筑数组，清空现有选项后遍历添加新选项：

function populateBuildingDropdown(buildings) {
    const buildingDropdown = document.getElementById("BuildingDropdown");
    
    // 清空下拉框，保留默认提示项
    buildingDropdown.innerHTML = '<option value="">请选择建筑</option>';

    // 遍历建筑数据，生成下拉选项
    buildings.forEach(building => {
        const option = document.createElement("option");
        option.value = building.BuildingNum; // 用BuildingNum作为选项值
        option.textContent = building.Name; // 用Name作为显示文本
        buildingDropdown.appendChild(option);
    });
}

4. 新手调试要点 #

• 按F12打开浏览器开发者工具，切换到Network标签，查看AJAX请求的状态码（200表示成功）和返回的JSON内容是否正确
• 在AJAX的成功回调中添加console.log(buildings)，确认数据是否被正确解析为数组
• 检查前端下拉框的id是否与代码中的CampusDropdown、BuildingDropdown完全一致

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