使用jQuery调用Web API获取数据，编辑表单无法填充数据求助

AI 小北

2026-8-19

问题分析与解决方案

你的代码核心问题是异步请求还未完成就跳转页面：$.getJSON是异步操作，需要等待API返回数据后才能执行填充表单的逻辑，但你在调用$.getJSON后立刻执行了window.location.replace，导致页面直接跳转，填充表单的代码是在旧页面执行的，新页面的表单自然是空的。

修正方案

步骤1：修改编辑按钮的点击逻辑，跳转时携带ID参数

不需要在当前页面请求数据，直接把学生ID通过URL参数传递到编辑页面：

function Edit(id) {
    // 跳转到编辑页面并携带id参数
    window.location.replace(`https://localhost:7196/Student/Edit?id=${id}`);
}

同时修正按钮的重复class属性（重复定义class会导致样式异常）：

"<button class='btn btn-primary btn-success' onclick='Edit(" + student[i]["id"] + ")'> Edit </button>"

步骤2：在编辑页面加载时请求数据并填充表单

在Student/Edit页面的脚本中，页面加载完成后读取URL中的ID，调用API获取数据并填充表单：

$(document).ready(function() {
    // 解析URL中的id参数
    const urlParams = new URLSearchParams(window.location.search);
    const studentId = urlParams.get('id');

    if (studentId) {
        $.getJSON(`https://localhost:7018/api/Students/GETBYID?id=${studentId}`, function(student) {
            $("#ed-id").val(student.id);
            $("#ed-name").val(student.name);
            $("#ed-department").val(student.department);
        }).fail(function() {
            alert('加载学生信息失败，请稍后重试');
        });
    }
});