Question

考虑以下HTML标记：

<form method="GET">
  <input type="text" name="a" value="one">
  <input type="text" name="b" value="two">
  <input type="text" name="c" value="three">
  <input type="submit">
</form>

如果没有JS，它会自然地使用查询字符串?a=one&b=two&c=three加载操作页面（在本例中为self）。

但是，我不希望加载操作页面并使用某些JS来防止这种情况：

document.querySelector("form").addEventListener("submit", function(e) {
  // Do some stuff
  e.preventDefault();
});

现在的问题是没有生成查询字符串，我必须使用以下内容手动计算它：

var queryString = "?" + [].map.call(document.querySelectorAll("input[type=text]"), function(element) {
  return element.name + "=" + element.value;
}).join("&");
console.log(queryString); // Displays "?a=one&b=two&c=three"

有没有办法可以避免这种情况并获取应该发送到操作页面的查询字符串？

编辑：我正在使用纯JavaScript，我不是在寻找涉及jQuery或其他JS框架的解决方案。

Answer 1

我不这么认为。要生成请求，您必须提交。

Answer 2

如果我理解正确，你可以使用jQuery中的serialize函数来处理查询字符串或表单提交的表单输入元素：

$('body').on('submit', 'form', function(evt) {
   evt.preventDefault();
   alert($(this).serialize());
   //redirect to another url with querystring window.location = '?' + $(this).serialize();
   //or you can do a submit $(this).submit();
});

这是一个FIDDLE：http://jsfiddle.net/mikea80/kfSM7/

检索表单提交生成的URL，而不调用操作页面

2 个答案: