使用 Javascript 在提交时获取从表单生成的 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28333613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the URL generated from a form on submit with Javascript
提问by vinzdef
I was wondering if it's possible to catch the URL generated from a form when firing its 'submit' event.
我想知道是否有可能在触发“提交”事件时捕获从表单生成的 URL。
I know I can generate the URL from data
我知道我可以从数据生成 URL
I'm not talking about form's action url
我不是在谈论表单的操作网址
I mean the ?field=value&other-input-name=value& ...part
我的意思是?field=value&other-input-name=value& ...部分
Scenario:
设想：
We have a form and a JS script which sends an ajax request to a PHP script.
我们有一个表单和一个 JS 脚本，它向 PHP 脚本发送 ajax 请求。
I usually do like this:
我通常这样做：
- Register for form's submit event
- Prevent default behavior
- Construct URL from data
- Open HTTP request with constructed URL
- 注册表单的提交事件
- 防止默认行为
- 从数据构造 URL
- 使用构造的 URL 打开 HTTP 请求
Now, I was wondering, when firing 'submit' normally (on non ajax requests) the URL gets constructed by the form, which then uses that URL to send data to php counterpart.
现在，我想知道，当正常触发“提交”时（在非 ajax 请求上），URL 由表单构造，然后使用该 URL 将数据发送到 php 对应项。
How can I 'catch' that URL? No clues from the event itself which doesn't seem to store it, or at least I haven't been able to find it.
我怎样才能“抓住”那个网址？事件本身没有任何线索似乎没有存储它，或者至少我无法找到它。
It must be somewhere!
它一定在某个地方！
采纳答案by e-neko
To put it simply, you can't. The best you can do is to collect the form field values yourself, or using jQuery's .serialize() function, which returns those values exactly as you'd expect:
简单地说，你不能。您能做的最好的事情是自己收集表单字段值，或者使用 jQuery 的 .serialize() 函数，它会完全按照您的预期返回这些值：
name=value&name2=value2
回答by Greg
This is possible and easy with the objects URLSearchParamsand FormData.
对于对象URLSearchParams和 ，这是可能且容易的FormData。
FormDatais an object representation of a form, for using with the fetchAPI. It can be constructed from an existing element like this:
FormData是表单的对象表示，用于与fetchAPI一起使用。它可以从现有元素构建，如下所示：
let form = document.forms[0];
let formData = new FormData(form);
Then comes the URLSearchParamsobject, which can be used to build up query strings:
然后是URLSearchParams对象，可用于构建查询字符串：
let search = new URLSearchParams(formData);
and now all you need to do is call the toString function on the search object:
现在您需要做的就是在搜索对象上调用 toString 函数：
let queryString = search.toString();
Done!
完毕！
回答by Stuart
As already stated you cannot get the generated URL containing the form values that the browser generates but it is very easy to construct it yourself.
如前所述，您无法获得包含浏览器生成的表单值的生成 URL，但自己构建它非常容易。
If you are using JQuery then use serialize(), if not refer to this post Getting all form values by javascript.
如果您使用的是 JQuery，则使用 serialize()，如果不是请参考这篇文章通过 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>回答by thanix
Do you mean getting the form's action URL? That url can be retrieved like this:
您的意思是获取表单的操作 URL？可以像这样检索该网址：
document.getElementById("form-id").action
If you using jQuery and assuming you are doing an ajax, it would be like this:
如果你使用 jQuery 并假设你正在做一个 ajax，它会是这样的：
var el = $('#form-id');
$.ajax({
type: el.attr('method'),
url: el.attr('action'),
data: el.serialize(),
context: this
}).done(callback);
