如何判断用户点击哪个同URL按钮跳转页面？求查询参数外的方案

• 表单POST提交区分
  把两个按钮放在同一个<form>标签内，给它们设置相同的name但不同的value，表单的action设为目标URL，请求方式用POST。用户点击按钮时，浏览器会自动将被点击按钮的name和value作为POST参数发送到后端，后端读取该参数即可判断点击来源。
  示例代码：

  <form action="/target-page" method="POST">
    <button type="submit" name="source_btn" value="btn_1">按钮1</button>
    <button type="submit" name="source_btn" value="btn_2">按钮2</button>
  </form>
  

• 本地存储标记法
  给每个按钮绑定点击事件，拦截默认跳转行为，先在sessionStorage中写入唯一标识，再手动跳转到目标页面。目标页面加载完成后，读取sessionStorage里的标识做对应处理，处理完记得清除标记避免影响后续操作。
  示例代码：

  // 按钮点击事件
  document.querySelector('#btn1').addEventListener('click', (e) => {
    e.preventDefault();
    sessionStorage.setItem('clicked_btn', 'btn1');
    window.location.href = '/target-page';
  });
  
  document.querySelector('#btn2').addEventListener('click', (e) => {
    e.preventDefault();
    sessionStorage.setItem('clicked_btn', 'btn2');
    window.location.href = '/target-page';
  });
  
  // 目标页面处理逻辑
  window.addEventListener('load', () => {
    const btnFlag = sessionStorage.getItem('clicked_btn');
    if (btnFlag === 'btn1') {
      // 执行按钮1对应的页面逻辑
    } else if (btnFlag === 'btn2') {
      // 执行按钮2对应的页面逻辑
    }
    sessionStorage.removeItem('clicked_btn');
  });
  

• 自定义请求头（前端拦截跳转）
  通过Fetch或XMLHttpRequest发起请求，给不同按钮的请求添加自定义请求头（比如X-Button-Source: btn1），后端读取该请求头即可区分点击来源。这种方式需要前端手动处理跳转，而非依赖标签默认跳转。
  示例代码：

  document.querySelector('#btn1').addEventListener('click', (e) => {
    e.preventDefault();
    fetch('/target-page', {
      method: 'GET',
      headers: {
        'X-Button-Source': 'btn1'
      }
    }).then(() => {
      window.location.href = '/target-page';
    });
  });
  

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