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

Question

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

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

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

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

场景:

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

我通常是这样的:

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

现在，我想知道，当正常触发“提交”(在非 Ajax 请求上)时，URL 由表单构建，然后使用该 URL 将数据发送到 PHP 副本。

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

它一定在某个地方!

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

完成!