如何根据HTML页面动态切换接口获取对应实体数据库数据？

针对你的小型项目，推荐两种比硬编码、页面判断更简洁易维护的接口管理方式：

方案一：HTML自定义属性注入接口地址 #

给每个页面的根元素（比如<body>）添加自定义属性，存储当前页面对应的接口地址和实体类型，JS统一读取这些属性发起请求，不用修改核心逻辑。

示例代码 #

活动页面的HTML：

<body data-api-url="http://localhost:8080/activities" data-entity="activity">
  <select id="ddSelectEntity"></select>
  <!-- 其他页面内容 -->
</body>

通用JS逻辑：

let entityList = [];
const selectElement = document.getElementById("ddSelectEntity");
// 从HTML获取配置
const apiUrl = document.body.getAttribute('data-api-url');
const entityType = document.body.getAttribute('data-entity');

window.addEventListener("load", loadEntityData);

async function loadEntityData(){
    entityList = await fetchAny(apiUrl);
    console.log(entityList);
    // 根据实体类型调用对应填充逻辑
    switch(entityType) {
        case 'activity':
            entityList.forEach(fillActivityDropdown);
            break;
        case 'employee':
            entityList.forEach(fillEmployeeDropdown);
            break;
        case 'customer':
            entityList.forEach(fillCustomerDropdown);
            break;
    }
 }

// 通用请求函数
function fetchAny(url) {
    console.log(url);
    return fetch(url).then(response => response.json());
}

// 各实体专属填充函数
function fillActivityDropdown(item) {
    const option = document.createElement('option');
    option.value = item.id;
    option.textContent = item.name;
    selectElement.appendChild(option);
}

function fillEmployeeDropdown(item) {
    // 员工下拉框填充逻辑
}

function fillCustomerDropdown(item) {
    // 客户下拉框填充逻辑
}

这种方式的好处：页面配置和JS逻辑解耦，新增实体页面只需要在HTML加属性、写对应填充函数，不用改动核心加载代码，后期维护更灵活。

方案二：按实体拆分JS模块 #

如果每个页面的逻辑差异较大，直接给每个实体页面写专属JS文件（比如activity.js、employee.js），每个文件里定义自己的接口地址和逻辑，对应HTML页面只引入专属JS即可。

示例代码 #

activity.js：

const apiUrl = "http://localhost:8080/activities";
let activityList = [];
const selectElement = document.getElementById("ddSelectActivity");

window.addEventListener("load", loadActivityData);

async function loadActivityData(){
    activityList = await fetchAny(apiUrl);
    console.log(activityList);
    activityList.forEach(fillActivityDropdown);
 }

// 通用请求函数可以抽成单独的utils.js，所有页面引入
function fetchAny(url) {
    console.log(url);
    return fetch(url).then(response => response.json());
}

function fillActivityDropdown(item) {
    const option = document.createElement('option');
    option.value = item.id;
    option.textContent = item.name;
    selectElement.appendChild(option);
}

活动页面HTML引入：

<script src="utils.js"></script> <!-- 通用工具函数 -->
<script src="activity.js"></script>

这种方式的好处：每个模块职责单一，代码清晰，调试和维护更方便，不用做页面判断，逻辑直接对应页面，适合小型项目快速迭代。

不推荐的方式 #

• JS内判断当前页面：页面越多，判断分支越臃肿，新增实体还要修改JS判断逻辑，违反开闭原则，后期维护成本高。

总结 #

如果各页面逻辑差异小，选HTML自定义属性+通用JS的方式；如果每个页面有较多专属逻辑，选拆分JS模块的方式，后者对于小型项目来说更易上手和维护。

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