如何在Select元素变更时用JS从ASP.NET Core控制器获取数据

一、后端控制器优化 #

原有控制器存在async标记未对应异步逻辑、无空值校验的问题，且查询操作建议显式指定[HttpGet]请求类型，符合REST规范，优化后代码如下：

using Microsoft.EntityFrameworkCore;

// 此处假设控制器名为HomeController，可根据实际情况调整
[HttpGet]
[Route("api/[controller]/GetHardwareUnit")]
public async Task<IActionResult> Get_Hardware_Unit(int id)
{
    // 改用异步查询+空值判断，避免无匹配数据时抛出异常
    Level level = await _context.Levels.FirstOrDefaultAsync(p => p.Number == id.ToString());
    if (level == null)
    {
        return NotFound("未查询到对应等级的硬件数据");
    }
    // 如果后续需要返回多个字段，可直接改为 return Json(level);
    return Content(level.Public_Hardware.ToString());
}

二、前端JS实现 #

推荐用原生Fetch API实现请求，无需引入第三方依赖，写法比传统XHR/POST请求更简洁，符合查询场景的语义，优化后代码如下：

async function Change_Aud() {
    const levelId = document.getElementById("Levelid").value;
    const hardwareField = document.getElementById("Hardware_La");

    try {
        // 发送GET请求，encodeURIComponent处理参数避免特殊字符报错
        const res = await fetch(`/api/Home/GetHardwareUnit?id=${encodeURIComponent(levelId)}`);
        if (!res.ok) throw new Error("接口请求异常");
        // 读取返回的文本内容，若后端返回Json则改用 await res.json()
        const hardwareVal = await res.text();
        hardwareField.value = hardwareVal;
    } catch (error) {
        // 异常兜底逻辑
        hardwareField.value = "";
        console.error("获取硬件数据失败：", error);
    }
}

方案优势 #

• 请求语义更合理：查询操作使用GET请求，符合HTTP规范，还可利用浏览器缓存提升重复请求的响应速度
• 依赖更少：原生Fetch API所有现代浏览器均支持，无需额外引入jQuery等库
• 鲁棒性更强：增加了空值判断和异常捕获逻辑，避免接口报错时页面功能异常
• 扩展性更好：如果后续需要返回多个字段，后端只需改返回Json结构，前端稍作调整即可读取多个属性值

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