将表单数据序列化为 JSON 时如何保留值类型

Posted 2023-05-09

【中文标题】将表单数据序列化为 JSON 时如何保留值类型

【英文标题】：How to preserve value type when serializing form data to JSON

【发布时间】：2018-05-21 03:26:12

【问题描述】：

我想将所有表单值转换为 JSON，以便可以在我的 AJAX POST 中将 JSON 作为正文发送。我在网上找到了这个现有的解决方案：

function getFormData($form)
    var unindexed_array = $form.serializeArray();
    var indexed_array = ;

    $.map(unindexed_array, function(n, i)
        indexed_array[n['name']] = n['value'];
    );

    return indexed_array;

用法：

var $form = $("#form_data");
var data = getFormData($form);

但是，这种方法 (source) 将所有值转换为字符串类型，它不会将数字保留为整数。我想不出一种方法来保留值的类型。最好的方法是什么？

html：

<form id="myform">
    <div>
      <label>Number: </label>
      <input id="mynum" type="number" name="mynum"/>
    </div>
    <div>
      <label>name: </label>
      <input id="myname" type="text" name="myname"/>
    </div>
</form>

【参考方案1】：

这是因为所有input 值默认为string 类型。如果要将类型转换为 number 类型，则必须手动进行。

一种方法是循环遍历JSON 并使用手动函数将string 值解析回number 类型。

创建手动函数：http://pietschsoft.com/post/2008/01/14/javascript-intTryParse-Equivalent

下面的代码显示即使input类型是number，其实类型是string：

let type;
function checkFormData()
  type = document.getElementById('mynum').value;
  console.log('The type of input#mynum is: ' +typeof type);
  return false;

<form id="myform" onsubmit=" return checkFormData()">
  <div>
    <label>Number: </label>
    <input id="mynum" type="number" name="mynum"/>
  </div>
  <div>
    <label>name: </label>
    <input id="myname" type="text" name="myname"/>
  </div>
  <input type="submit" value="Submit"/>
</form>

【讨论】：

但是对于某些输入，我输入了 type="number"，在这种情况下这根本没有帮助

你可以在问题中添加一些html标记来看看吗？

查看帖子中添加的 html

@b11，虽然input的类型是数字，但实际上是string。请查看我更新的答案以检查...谢谢。

所以我必须在表单的每个字段上使用手动功能？如果有 n 个字段，则会创建 n 个函数调用。有没有更好的办法？