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

Question

是否可以在触发 'submit' 事件时捕获从表单生成的 URL？

我知道我可以从数据

生成URL

我说的不是表格的动作URL

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

场景：

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

我通常是这样的：

注册表单的提交事件
防止默认行为
从数据
使用构造的 URL

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

我怎么能'catch'那个URL？事件本身没有任何线索似乎没有存储它，或者至少我没能找到它。

它一定在某个地方！

Answer 1

如果您的意思是获取表单的操作 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);

Answer 2

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

name=value&name2=value2

Answer 3

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

如果您使用 jQuery，则使用 serialize()。如果不是，参考postGetting 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>

Answer 4

对象 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();

完成！

Answer 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>

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

Get the URL generated from a form on submit with JavaScript

javascript

ajax

form-submit

dom-events

onsubmit