点击提交按钮时实现HTML页面间数据传输的技术咨询

你的代码存在几个关键问题：

• 页面是独立的，在page1的JS里无法获取page2的DOM元素（dataName），因为page1加载时page2还未渲染
• JS逻辑顺序错误，你先给resultName.value赋值未定义的dataName，之后才定义它
• 表单默认会以GET方式提交数据到page2，但你没有在page2中读取URL里的参数

下面是两种可行的解决方法：

方法一：利用URL查询参数（适配当前表单提交逻辑） #

这种方法无需修改page1的HTML，只需要给page2添加读取URL参数的JS代码：

page2的JavaScript代码 #

window.onload = function() {
  // 解析URL中的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  // 获取name为"N"的输入框提交的值
  const userName = urlParams.get('N');
  // 将值插入到page2的对应位置
  if (userName) {
    document.getElementById('dataName').textContent = userName;
  }
}

此时可以删掉page1中的原有JS代码，因为表单默认的GET提交会自动把输入框数据拼接到URL后，无需额外点击事件处理。

方法二：使用localStorage存储数据（适合不暴露数据在URL的场景） #

这种方法需要修改page1的提交逻辑，阻止表单默认提交，将数据存入本地存储后再跳转：

page1的JavaScript代码 #

const submitForm = document.querySelector('form');
submitForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  // 获取输入框的值
  const userName = document.querySelector("input[name='N']").value;
  // 将数据存入localStorage
  localStorage.setItem('userName', userName);
  // 手动跳转到page2
  window.location.href = 'page2.html';
});

page2的JavaScript代码 #

window.onload = function() {
  // 从localStorage中取出数据
  const userName = localStorage.getItem('userName');
  if (userName) {
    document.getElementById('dataName').textContent = userName;
    // 可选：用完数据后清除，避免下次打开page2时仍显示旧数据
    localStorage.removeItem('userName');
  }
}

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