如何在Ajax请求成功后跳转页面并基于WebAPI的JSON结果填充字段？

我来帮你搞定这个需求——你现在的核心痛点是：Ajax请求拿到JSON结果后，直接跳转页面会丢失当前的JS上下文，没法直接操作新页面的DOM。这里有两种实用的方案，根据你的数据量和场景选择：

方案一：通过URL参数传递数据（适合小体量数据） #

这种方式把JSON数据编码后拼在URL里，跳转到目标页面后再解析填充：

修改你的Ajax成功回调 #

success: function(respo) {
    // 将JSON对象转为字符串并编码，避免URL解析问题
    var encodedData = encodeURIComponent(JSON.stringify(respo));
    // 跳转到目标页面（替换成你的实际Action路径）
    window.location.href = '@Url.Action("ViewRoster", "Home")?rosterData=' + encodedData;
}

目标页面的JS填充逻辑 #

在跳转后的页面（比如ViewRoster.cshtml）里添加以下代码，读取URL参数并填充字段：

$(document).ready(function() {
    // 解析URL中的参数
    const urlParams = new URLSearchParams(window.location.search);
    const dataStr = urlParams.get('rosterData');
    
    if (dataStr) {
        // 解码并转回JSON对象
        const rosterData = JSON.parse(decodeURIComponent(dataStr));
        
        // 示例：填充页面元素，替换成你实际的元素ID和字段名
        $('#employeeName').text(rosterData.EmployeeName);
        $('#department').val(rosterData.Department);
        $('#joinDate').text(rosterData.JoinDate);
        // 其他字段以此类推
    }
});

方案二：使用本地存储传递数据（适合大数据量/不想暴露数据在URL） #

如果你的JSON数据比较大，或者不想把数据暴露在URL里，用sessionStorage（会话结束后自动清除）来存储数据是更好的选择：

修改Ajax成功回调 #

success: function(respo) {
    // 将JSON对象转为字符串存入sessionStorage
    sessionStorage.setItem('rosterData', JSON.stringify(respo));
    // 跳转到目标页面
    window.location.href = '@Url.Action("ViewRoster", "Home")';
}

目标页面的JS填充逻辑 #

在跳转后的页面读取存储的数据并填充，用完记得删除避免残留：

$(document).ready(function() {
    const storedData = sessionStorage.getItem('rosterData');
    
    if (storedData) {
        const rosterData = JSON.parse(storedData);
        
        // 填充页面字段，示例同上
        $('#employeeName').text(rosterData.EmployeeName);
        $('#department').val(rosterData.Department);
        
        // 用完删除存储的数据，防止下次页面加载误读
        sessionStorage.removeItem('rosterData');
    }
});

额外注意事项 #

• 确保目标页面已经加载了jQuery，不然$(document).ready和元素选择器会失效；
• 如果用URL参数，注意浏览器对URL长度的限制（一般不超过2KB），数据量大就选本地存储；
• 页面元素的ID要和你JSON里的字段对应，确保选择器能正确找到元素；
• 如果你偏好服务器端渲染填充，也可以在目标Action里接收参数，反序列化为模型后通过ViewBag或模型传递给视图，再用Razor语法渲染字段，但这种方式不如前端直接处理灵活。

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