使用 JavaScript 在提交時獲取從表單生成的 URL

Question

是否可以在觸發其“提交”事件時捕獲從表單生成的 URL？

我知道我可以從數據生成 URL

我不是在談論表單的操作 URL

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

設想：

我們有一個表單和一個 JavaScript 腳本，它向 PHP 腳本發送 Ajax 請求。

我通常這樣做：

• 注冊表單的提交事件
• 防止默認行為
• 從數據構造 URL
• 使用構造的 URL 打開 HTTP 請求

現在，我想知道，當（在非 Ajax 請求上）正常觸發“提交”時，URL 由表單構造，然后使用該 URL 將數據發送到 PHP 對應方。

我怎樣才能“抓住”那個網址？ 事件本身沒有任何線索似乎沒有存儲它，或者至少我無法找到它。

它一定在某個地方！

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

完畢！

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

Answer 4

如前所述，您無法獲得包含瀏覽器生成的表單值的生成 URL，但自己構建它非常容易。

如果您使用 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>

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>