使用本机数据类型将表单输入自动编码为 JSON

Posted 2023-05-08

【中文标题】使用本机数据类型将表单输入自动编码为 JSON

【英文标题】：Automatically encode form input to JSON with native datatype

【发布时间】：2021-12-20 15:09:04

【问题描述】：

我知道（来自this）我可以在将值传递给JSON.stringify 之前将其显式转换为整数。但是当您想要序列化表单数据时，这种方法没有用。我有一个通用代码：

let myform='#my_form_id`;
$(myform).submit(function(event) 
    event.preventDefault();
    const formData = new FormData($(myform)[0]);
    const json = JSON.stringify(Object.fromEntries(formData));
    ws.send(json); // send over websocket
);

而且我真的不想在序列化之前手动将每个字段转换为适当的类型。这违反了“编写良好”代码的所有规则。

那么，如何在 JSON 中序列化表单字段以保持其原生数据类型？

【问题讨论】：

听起来像是地图功能的工作。您能否提供一些表单的示例 html？

@PoorlyWrittenCode 关键是它应该适用于 any 形式。它应该紧跟input 标签的type 值。如果 type="number" 它应该将 JSON 值作为数字，如果 type="checkbox" 作为布尔值，等等......

【参考方案1】：

您可以map 覆盖输入并使用switch case 选择返回的数据和类型。

$('form').on('submit', function(e) 
  e.preventDefault();
  
  let json = JSON.stringify($(this).find('input').get().map(function(input)
    switch (input.type) 
      case 'checkbox':
      case 'radio': return input.checked; break;
      case 'number':
      case 'range': return +(input.value || 0); break;
      default: return input.value || ''
    
  ));
  
  $('.json').html(json);
);

<form>
  <div>
    <input>
    <input type="number">
    <input type="checkbox">
    <input type="radio">
    <input type="color">
    <input type="date">
    <input type="range">
  </div>
  <div>
    <input>
    <input type="number">
    <input type="checkbox">
    <input type="radio">
    <input type="color">
    <input type="date">
    <input type="range">
  </div>
  <button action="submit">SERIALIZE</button>
</form>
<p class="json"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>