使用 JavaScript 获取从表单提交时生成的 URL答案

【问题标题】：Get the URL generated from a form on submit with JavaScript使用 JavaScript 获取从表单提交时生成的 URL
【发布时间】：2015-02-04 23:32:52
【问题描述】：

是否可以在触发其“提交”事件时捕获从表单生成的 URL？

我知道我可以从数据中生成 URL

我不是在谈论表单的操作 URL

我的意思是?field=value&other-input-name=value& ... 部分

场景：

我们有一个表单和一个向 PHP 脚本发送 Ajax 请求的 JavaScript 脚本。

我通常是这样的：

注册表单的提交事件
阻止默认行为
根据数据构造 URL
使用构造的 URL 打开 HTTP 请求

现在，我想知道，当正常触发“提交”时（在非 Ajax 请求上），URL 由表单构造，然后使用该 URL 将数据发送到 PHP 对应方。

如何“捕获”该 URL？事件本身没有任何线索似乎没有存储它，或者至少我无法找到它。

它一定在某个地方！

【问题讨论】：

可以获取表单的action属性。如果没有定义动作属性，则当前页面为目标。

标签： javascript ajax form-submit dom-events onsubmit

【解决方案1】：

使用URLSearchParams 和FormData 对象可以轻松实现这一点。

FormData 是表单的对象表示，用于fetch API。它可以像这样从现有元素构造：

let form = document.forms[0];
let formData = new FormData(form);

然后是URLSearchParams 对象，可用于构建查询字符串：

let search = new URLSearchParams(formData);

现在您需要做的就是在搜索对象上调用 toString 函数：

let queryString = search.toString();

完成！

【讨论】：

URLSearchParams 的一些浏览器兼容性问题，不过是不错的解决方案！
完美，越用 JavaScript 越了解，还有很多东西需要学习。

【解决方案2】：

如果您的意思是获取表单的操作 URL，则可以像这样检索该 URL：

document.getElementById("form-id").action

如果你使用 jQuery 并假设你正在做一个 Ajax 请求，它会是这样的：

var el = $('#form-id');
$.ajax({
    type: el.attr('method'),
    url: el.attr('action'),
    data: el.serialize(),
    context: this
}).done(callback);

【讨论】：

不，我说的是在提交时生成的序列化 URL 数据，?email=mymail@mail.com&name=myname ... 部分！
对不起，哥们，还没有评论和寻求澄清的权限，所以发布了这个作为答案，认为这可能是你要问的。

【解决方案3】：

简单地说，你不能。您可以做的最好的事情是自己收集表单字段值，或者使用 jQuery 的 .serialize() 函数，它会完全按照您的预期返回这些值：

name=value&name2=value2

【讨论】：

我不想这么简单，我知道我可以像往常一样从外地得到它们，请先生详细说明
不能拦截表单发送给服务器的请求。
你好，未来可以用 JavaScript 拦截 HTTP 请求。
@Greg 对于常规页面，我能想到的唯一方法是通过服务人员——一种非常复杂的方式。不过谢谢！

【解决方案4】：

如前所述，您无法获取包含浏览器生成的表单值的生成 URL，但自己构造它非常容易。

如果您使用的是 jQuery，请使用 serialize()。如果没有，请参阅帖子Getting all form values by JavaScript。

var targetForm = $('#myForm');
var urlWithParams = targetForm.attr('action') + "?" + targetForm.serialize();
alert(urlWithParams);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="/search/"  id="myForm" method="get">
  <input name="param1" type="hidden" value="1">
  <input name="param2" type="hidden" value="some text">
</form>

【讨论】：

【解决方案5】：

你可以使用javascript来生成它：

<script>
function test(frm) {
  var elements = frm.elements;
  var url = "?";
  for(var i=0;i<elements.length;i++) {
    var element = elements[i];
    if (i > 0) url += "&";
    url += element.name;
    url += "=";
    if (element.getAttribute("type") == "checkbox") {
      url += element.checked;
    } else {
      url += element.value;
    }
  }
  console.log(url);
  return false;
}
</script>

<form onsubmit='return test(this);'>
<input name=field1 value='123'>
<input type=checkbox name=field2 checked>

<input type=submit>
</form>

【讨论】：