如何将表单序列化为对象（具有树结构）？

我有一个表格

<form>
    <input type="text" name="Name" />
    <input type="checkbox" name="Feature.Translate" />
    <input type="checkbox" name="Feature.Share" />

    <input type="submit" value="Convert into an object" />
</form>

我想将它转换为一个对象

{
    Name: "John Connor's Terminator",
    Feature:
    {
        Translate: true // if checked
        // Share wasn't checked
    }
}

如何将表单映射到具有此树结构的对象？

添加此方法来帮助您构建树

// add keys to an object as a tree
// ["a", "b", "c"] will generate
// a { b: { c: def } }
// def is the value of the leaf node
var AddToTree = function(obj, keys, def)
{
    for (var i = 0, length = keys.length; i < length; ++i)
        obj = obj[keys[i]] = i == length - 1 ? def : obj[keys[i]] || {};
};

为 jQuery 选择器创建一个函数，该函数将转换对象中的表单

$.fn.serializeObject = function()
{
   var o = {}; // final object
   var a = this.serializeArray(); // retrieves an array of all form values as
                                  // objects { name: "", value: "" }

   $.each(a, function() {
       var ns = this.name.split("."); // split name to get namespace
       AddToTree(o, ns, this.value); // creates a tree structure
                                     // with values in the namespace
   });

   return o;
};

通过这两个函数定义，您可以在提交按钮上设置事件：

$(":submit").click(function(e){
    // contains the object from the form
    // respecting element namespaces
    var obj = $("form").serializeObject();
});