使用JavaScript通过URL传递表单值至另一页面的实现问题

咱们先理清楚核心需求：放弃表单默认的POST提交，改用JS接管提交逻辑，把姓名、邮箱参数拼在地址栏里，重定向到目标页面。下面分步骤给你说具体实现方式：

步骤1：调整表单基础结构 #

先给表单加个ID方便JS获取，也可以把原来的method="post"改成method="get"（其实JS会阻止默认提交，改不改都行，但看着更清晰），代码示例：

<form id="userForm" class="af-form-wrapper" accept-charset="UTF-8">
  <input type="text" name="username" placeholder="请输入姓名">
  <input type="email" name="useremail" placeholder="请输入邮箱">
  <button type="submit">提交</button>
</form>

步骤2：编写JavaScript核心逻辑 #

咱们要监听表单的提交事件，做这几件事：阻止默认提交、获取输入值、校验格式、构造带参数的URL、执行重定向。具体代码如下：

// 获取表单元素
const userForm = document.getElementById('userForm');

// 监听表单提交事件
userForm.addEventListener('submit', function(e) {
  // 先阻止表单默认的POST提交行为
  e.preventDefault();
  
  // 获取姓名和邮箱的输入值，顺便去掉前后空格
  const userName = userForm.querySelector('input[name="username"]').value.trim();
  const userEmail = userForm.querySelector('input[name="useremail"]').value.trim();
  
  // 简单做个输入校验，避免空值或无效邮箱
  if (!userName || !userEmail) {
    alert('姓名和邮箱都不能为空哦！');
    return;
  }
  // 邮箱格式校验正则
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailReg.test(userEmail)) {
    alert('请输入正确格式的邮箱！');
    return;
  }
  
  // 构造目标URL，把参数拼在地址栏（这里替换成你的实际目标页面地址）
  // 一定要用encodeURIComponent编码参数，避免特殊字符乱码
  const targetPageUrl = `https://your-target-page.com?name=${encodeURIComponent(userName)}&email=${encodeURIComponent(userEmail)}`;
  
  // 执行重定向
  window.location.href = targetPageUrl;
});

额外补充：如果还要同时提交到Aweber接口 #

要是你原来的需求既要把参数传到目标页面地址栏，又要把数据提交到Aweber的addlead.pl脚本，那可以在重定向之前先发送POST请求到Aweber，再跳转，代码示例：

// 在构造完targetPageUrl之后，添加这段代码
fetch('https://www.aweber.com/scripts/addlead.pl', {
  method: 'POST',
  body: new FormData(userForm),
  headers: {
    'Accept-Charset': 'UTF-8'
  }
})
.then(() => {
  // 提交成功后再跳转到目标页面
  window.location.href = targetPageUrl;
})
.catch(err => {
  console.error('提交到Aweber失败:', err);
  alert('提交出错啦，请重试！');
});

这样就能同时满足两个需求啦～

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