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

时间:2015-02-04 23:32:52

标签: javascript ajax javascript-events form-submit onsubmit

我想知道在解雇表单时是否有可能抓住表单生成的网址提交#39;事件

我知道我可以从数据生成网址

我不是在谈论表格的行动网址

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

情景:

我们有一个表单和一个JS脚本,它将ajax请求发送到PHP脚本。

我通常喜欢这样:

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

现在,我想知道,在解雇时提交'通常(在非ajax请求上)URL由表单构造,然后使用该URL将数据发送给php对应。

我怎样才能抓住'那个网址?没有来自事件本身的线索似乎没有存储它,或者至少我还没有找到它。

一定是某个地方!

5 个答案:

答案 0 :(得分:4)

简单地说,你不能。您可以做的最好的事情是自己收集表单字段值,或者使用jQuery的.serialize()函数,它会完全按照您的预期返回这些值:

name=value&name2=value2

答案 1 :(得分:4)

使用对象URLSearchParamsFormData,这是可能且容易的。

FormData是表单的对象表示形式,用于fetch API。可以从这样的现有元素构造它:

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

然后是URLSearchParams对象,该对象可用于构建查询字符串:

let search = new URLSearchParams(formData);

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

let queryString = search.toString();

完成!

答案 2 :(得分:3)

您的意思是获取表单的操作网址吗?该网址可以像这样检索:

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

答案 3 :(得分:2)

如前所述,您无法获取包含浏览器生成的表单值的生成的URL,但您可以自行构建它。

如果你正在使用JQuery,那么使用serialize(),如果没有引用这篇文章Getting 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>

答案 4 :(得分:0)

您可以使用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>