通过javascript获取从表单生成的URL

Question

我想知道在触发'submit'事件时是否可以捕获表单生成的URL.

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

我不是在谈论表单的动作网址

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

场景:

我们有一个表单和一个JS脚本,它向PHP脚本发送一个ajax请求.

我通常喜欢这样:

• 注册表单的提交活动
• 防止默认行为
• 从数据构造URL
• 使用构造的URL打开HTTP请求

现在,我想知道,当正常触发'submit'时(在非ajax请求上),URL由表单构造,然后使用该URL将数据发送到php对应物.

我怎样才能"抓住"该网址？没有来自事件本身的线索似乎没有存储它,或者至少我无法找到它.

它一定是某个地方!

Answer 1

对于对象URLSearchParams和 ，这是可能且容易的FormData。

FormData是表单的对象表示，用于与fetchAPI一起使用。它可以从现有元素构建，如下所示：

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

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

let search = new URLSearchParams(formData);

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

let queryString = search.toString();

完毕！

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

Answer 3

简而言之，你不能。您能做的最好的事情就是自己收集表单字段值，或者使用 jQuery 的 .serialize() 函数，该函数将完全按照您的预期返回这些值：

name=value&name2=value2