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

Question

我知道（来自 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 中的表单字段以保持它们的原始数据类型？

Answer 1

您可以map over the inputs and use a 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>

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

Automatically encode form input to JSON with native datatype

html

javascript

jquery

serialization

json