如何获取HTML表单提交来源的实时页面URL？

核心思路 #

通过隐藏的<input>标签存储当前页面URL，在表单提交时随其他字段一同发送到后端。以下是具体实现代码：

HTML 结构 #

先在表单中添加一个隐藏输入框，用于存放来源URL：

<form id="targetForm" action="/your-submit-endpoint" method="POST">
  <!-- 其他业务表单字段 -->
  <input type="email" name="user_email" placeholder="请输入邮箱">
  
  <!-- 隐藏的来源URL字段 -->
  <input type="hidden" name="source_url" id="sourceUrl">
  
  <button type="submit">提交表单</button>
</form>

JavaScript 实现 #

有两种常见的赋值方式，可根据场景选择：

方式一：页面加载时直接赋值

适用于普通多页网站，URL不会在页面内动态变化的场景：

// 页面DOM加载完成后，将当前页面URL赋值给隐藏输入框
document.addEventListener('DOMContentLoaded', () => {
  const sourceInput = document.getElementById('sourceUrl');
  // 获取当前页面完整URL（含协议、域名、路径及参数）
  sourceInput.value = window.location.href;
});

方式二：表单提交前实时赋值

适用于单页应用（SPA）或URL可能在页面内动态变化的场景，确保提交时拿到最新的页面地址：

// 监听表单提交事件，提交前更新URL值
const form = document.getElementById('targetForm');
form.addEventListener('submit', (e) => {
  const sourceInput = document.getElementById('sourceUrl');
  sourceInput.value = window.location.href;
  // 无需阻止默认提交行为，赋值后表单会正常提交
});

后端接收说明 #

表单提交后，后端可通过source_url这个参数名获取到来源页面的完整URL，比如：

• PHP：$_POST['source_url']
• Node.js（Express）：req.body.source_url
• Python（Django）：request.POST.get('source_url')

内容的提问来源于stack exchange，提问作者Md Nur Nobi