时间戳

首页 > 解决方案 > 将多个输入序列化为单个参数

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

问题描述

我有以下表格：

<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 个filter带有 2 个值的参数。

理想情况下，网址如下所示：

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>

标签： javascripthtmlforms

解决方案

在查询字符串中发送 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>

推荐阅读