JS跳转新HTML页面替换REST响应字符串失效问题

占位符替换失效是两处逻辑错误导致的：

• 浏览器环境不存在open("xxx.html").read()这种同步读取本地HTML文件的API，window.open()的作用是打开新窗口/标签页，返回值是窗口对象引用，没有read()方法，你根本没拿到response.html的模板内容。
• 退一步说，即使你在内存里完成了字符串替换，最后执行document.location.href = '/response'会触发浏览器向服务器发起新的页面请求，加载的是服务器上存储的原始response.html文件，之前内存里做的替换操作和新请求的页面完全无关，占位符当然不会被替换。

选以下任意一种方案即可实现需求： #

方案1：当前页直接渲染替换后的模板（无额外页面跳转，实现最简单） #

不需要触发页面跳转，拿到接口响应后拉取模板、替换占位符，直接把渲染完成的内容写入当前文档：

function sendDELrequest() {
    const serviceID = $("#serviceID").val();
    const requestUrl = "/api/microservice/" + serviceID;
    $.ajax({
        method: "DELETE",
        url: requestUrl,
        success: function (response) {
            renderResponsePage(response);
        },
    });
}

async function renderResponsePage(apiResp) {
    // 拉取response.html模板原始内容
    const templateText = await fetch("response.html").then(res => res.text());
    // 替换占位符：如果接口直接返回字符串就直接用，返回对象就取对应text字段
    const respContent = typeof apiResp === 'string' ? apiResp : apiResp.text;
    const renderedPage = templateText.replace(/__RESPONSE_VALUE__/g, respContent);
    // 将渲染完成的页面写入当前文档
    document.open();
    document.write(renderedPage);
    document.close();
}

方案2：跳转独立response页面，通过会话存储传值 #

如果必须跳转到独立的response页面，可以先把接口响应存在会话级存储里，跳转后在response页面自行完成内容替换：

1. 调整接口请求成功后的回调逻辑：

function Resp(r) {
    // 把响应内容存入sessionStorage，跳转后页面可以读取
    const respContent = typeof r === 'string' ? r : r.text;
    sessionStorage.setItem('delRequestResp', respContent);
    // 跳转到response页面
    location.href = '/response.html';
}

2. 在response.html的</body>标签前加一段脚本，页面加载时自动替换占位符：

<script>
document.addEventListener('DOMContentLoaded', () => {
    const respContent = sessionStorage.getItem('delRequestResp') || '请求未返回有效内容';
    // 直接定位到要显示内容的h3标签替换文本，比替换整页HTML更稳妥
    document.querySelector('.container h3').textContent = respContent;
    // 读取完成后清理存储，避免残留
    sessionStorage.removeItem('delRequestResp');
})
</script>

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