javascript - 将 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() 最重要的调用)