将HTML表单字段转换为具有内部对象的JSON对象

Question

给出以下HTML表单:

<form id="myform">
  Company: <input type="text" name="Company" value="ACME, INC."/>
  First Name: <input type="text" name="Contact.FirstName" value="Daffy"/>
  Last Name: <input type="text" name="Contact.LastName" value="Duck"/>
</form>

将此表单在javascript中序列化为JSON对象的最佳方式是什么:

{
  Company:"ACME, INC.",
  Contact:{FirstName:"Daffy", LastName:"Duck"}
}

另请注意,可能会有超过1个"." 登录字段名称.

Answer 1

我认为你要做的是:对于每个输入,首先在分隔符处分割名称('.'字符).现在,您有一系列名称.然后,您可以遍历该数组,确保每次遇到新的名称段时,目标"程序集"对象(和子对象)都有容器.当数组中包含1个元素时,只需添加该值即可.

$.fn.extractObject = function() {
  var accum = {};
  function add(accum, namev, value) {
    if (namev.length == 1)
      accum[namev[0]] = value;
    else {
      if (accum[namev[0]] == null)
        accum[namev[0]] = {};
      add(accum[namev[0]], namev.slice(1), value);
    }
  }; 
  this.find('input, textarea, select').each(function() {
    add(accum, $(this).attr('name').split('.'), $(this).val());
  });
  return accum;
});
// ...

var object = $('#myform').extractObject();

我只是做了这样的事情,所以可能会有一两个错误; 我不记得所有浏览器是否都有"切片",但我认为它们确实存在.

(编辑:我忘记了最重要的电话split())