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

时间:2017-12-07 05:08:54

标签: javascript jquery arrays json forms

我想将所有表单值转换为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 个答案:

答案 0 :(得分:2)

这是因为默认情况下所有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>