javascript - 将多个输入序列化为单个参数

Question

我有以下表格:

<form method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>

提交表单时生成的 URL 为:https://example.com/?search=inbox&filter=draft&filter=10%2F10%2F2020

这导致发送 1 个 search 参数和 2 个 filter 参数:

search=inbox

filter=draft

filter=10%2F10%2F2020

我想做的是发送 1 个 search 参数和值，以及 1 个具有 2 个值的 filter 参数。

理想情况下，网址应如下所示:

https://example.com/?search=inbox&filter=draft&10%2F10%2F2020

结果是 1 个 search 参数和 1 个 filter 参数，发送了 2 个值:

search=inbox

filter=draft&10%2F10%2F2020

我可以将这 2 个过滤器输入字段连接到一个查询字符串中吗？

$( "#target" ).submit(function( event ) {
  var datastring = $("#target").serialize();
  console.log(datastring);
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<form id="target" method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>

Answer 1

在查询字符串中发送 2 个输入字段值不是错误，但您必须在服务器端处理它。即，您将需要知道拆分这 2 个值。

$( "#target" ).submit(function( event ) {
  var datastring = '?search='+$("#search-input").val()+'&filter='+$("#filter-type").val();
  //datastring = datastring + add a delimiter in here

  datastring = datastring + $("#filter-start-date").val();
  console.log(datastring);
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<form id="target" method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>