如何通过AJAX实现不同HTML页面之间的参数传递与显示？

你当前代码的核心问题是：XMLHttpRequest用于客户端和服务端的网络请求，无法实现两个前端页面之间的参数传递；同时第一个页面的JS无法直接操作第二个页面的DOM元素，参数传递需要借助中间存储或者URL携带的方式实现。

方案1：URL参数携带（适合提交后跳转至第二个页面的场景） #

修改第一个页面的JS代码 #

function myFunction() {
    // 获取表单输入值
    const name = document.getElementById('name').value;
    const address = document.getElementById('address').value;
    // 拼接参数到第二个页面的URL，encodeURIComponent用于处理特殊字符
    const targetPage = `./第二个页面的文件名.html?name=${encodeURIComponent(name)}&address=${encodeURIComponent(address)}`;
    // 跳转至第二个页面
    window.location.href = targetPage;
}

修改第二个页面的代码，新增参数解析逻辑 #

在第二个页面</body>前添加如下JS代码：

<script>
// 解析URL携带的查询参数
const queryParams = new URLSearchParams(window.location.search);
const userName = queryParams.get('name');
// 将参数渲染到指定元素
if(userName) {
    document.getElementById('1').innerHTML = `<h1>alola=${userName}</h1>`;
}
// 如需展示地址可以新增对应DOM元素后打开下方注释
// const userAddress = queryParams.get('address');
// if(userAddress) document.getElementById('2').innerText = userAddress;
</script>

方案2：localStorage本地存储（适合第二个页面在新标签页打开、无需跳转原页面的场景） #

修改第一个页面的JS代码 #

function myFunction() {
    const name = document.getElementById('name').value;
    const address = document.getElementById('address').value;
    // 将参数存入本地存储
    localStorage.setItem('customerName', name);
    localStorage.setItem('customerAddress', address);
    // 新标签页打开第二个页面，如需跳转替换为window.location.href = './第二个页面的文件名.html'即可
    window.open('./第二个页面的文件名.html');
}

修改第二个页面的代码，新增取值逻辑 #

在第二个页面</body>前添加如下JS代码：

<script>
// 从本地存储读取参数
const userName = localStorage.getItem('customerName');
if(userName) {
    document.getElementById('1').innerHTML = `<h1>alola=${userName}</h1>`;
}
// 可选：读取完成后清除存储的参数
// localStorage.removeItem('customerName');
</script>

注意事项 #

• 建议不要使用纯数字作为DOM元素的id，不符合HTML规范，可改为customer-info这类语义化命名
• 两种方案仅适用于同域名下的静态页面，跨域名场景需要借助服务端实现参数传递

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