使用jQuery Ajax提交表单时获取当前URL的技术问询

我来帮你搞定这个需求——提交Ajax表单时带上当前页面的URL其实很简单，咱们一步步来实现：

1. 先补全你的表单结构（基于你给出的代码片段） #

首先确保你的表单有完整的字段和提交按钮（你的原代码有点截断，我帮你补全了基础结构）：

<form id="request" method="post" autocomplete="off" class="form-horizontal row scrollTo" novalidate="novalidate">
  <div class="form-group row">
    <label class="control-label label-font" for="lastname">Lastname</label>
    <input name="lastname" id="lastname" class="form-control required" type="text">
  </div>
  <div class="form-group row">
    <label class="control-label label-font" for="firstname">Firstname</label>
    <input name="firstname" id="firstname" class="form-control required" type="text">
  </div>
  <!-- 这里可以添加其他表单字段 -->
  <button type="submit" class="btn btn-primary">Submit Form</button>
</form>

2. 编写jQuery Ajax提交逻辑 #

核心思路是：阻止表单默认提交 → 获取当前URL → 把URL作为额外字段加入表单数据 → 发送Ajax请求：

$(document).ready(function() {
  // 监听表单提交事件
  $('#request').submit(function(e) {
    // 阻止浏览器默认的表单提交行为
    e.preventDefault();

    // 获取当前页面的完整URL（包含协议、域名、路径、参数）
    const currentPageUrl = window.location.href;
    // 如果只需要页面路径（比如 /contact），可以用 window.location.pathname

    // 收集表单现有数据，并添加当前URL字段
    const formDataArray = $(this).serializeArray();
    formDataArray.push({ 
      name: 'current_url', // 后端可以通过这个字段名获取URL值
      value: currentPageUrl 
    });

    // 发送Ajax请求
    $.ajax({
      url: '/your-backend-endpoint', // 替换成你的实际后端接口地址
      type: 'POST',
      data: formDataArray,
      success: function(response) {
        // 提交成功后的处理逻辑
        console.log('表单提交成功，返回数据:', response);
        alert('表单提交成功！');
        // 可选：重置表单
        $('#request')[0].reset();
      },
      error: function(xhr, status, error) {
        // 提交失败后的处理逻辑
        console.error('表单提交失败:', error);
        alert('提交失败，请稍后重试！');
      }
    });
  });
});

额外说明 #

• 如果不想用serializeArray()，也可以用serialize()拼接的方式，记得对URL做编码：

  const formData = $(this).serialize() + '&current_url=' + encodeURIComponent(currentPageUrl);
  

  把这个formData直接传给Ajax的data参数即可。
• 后端接收数据时，只需要读取current_url这个字段，就能拿到提交表单时的页面URL了。

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