使用lodash#set

let serialized = [
  { key: 'data[model][id]', value: 1 },
  { key: 'data[model][name]', value: 'product' },
  { key: 'sid', value: 'dh0un1hr4d' }
];

serialized.reduce(function(res, item) {
  _.set(res, item.key, item.value);
  return res;
}, {});

// returns
{
  "data": {
    "model": {
      "id": 1,
      "name": "product"
    }
  },
  "sid": "dh0un1hr4d"
}

所有这些答案对我来说似乎都太过头了。为了简单起见，有些话要说。只要您的所有表单输入都设置了name属性，这应该只适用于jimdandy。

$（'form.myform'）.submit（函数（）{var$this=$（this），viewArr=$this.serializeArray（），视图=｛｝；for（viewArr中的var i）{view[viewArr[i].name]=viewArr[i].value；}//在这里使用视图对象（例如JSON.stringify？）});

在不检查每个元素的情况下，确实无法做到这一点。您真正想知道的是“是否有其他人已经编写了一个将表单转换为JSON对象的方法？”类似于下面的内容应该可以工作——请注意，它只会为您提供通过POST返回的表单元素（必须有名称）。这是未测试的。

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

jQuery中有一个插件jQuery.serializeJSON。我已经在几个项目中成功地使用了它。它就像一个符咒。

我最近遇到了同样的问题，并推出了这个.toJSONjQuery插件，它将表单转换为具有相同结构的JSON对象。这对于动态生成的表单也特别有用，因为您希望用户在特定位置添加更多字段。

重点是你可能实际上想要构建一个表单，这样它本身就有一个结构，所以让我们假设你想要创建一个用户在城镇中插入他最喜欢的位置的表单：你可以想象这个表单代表一个<places></places>XML元素，包含用户喜欢的位置列表，因此是<place>列表</place>元素，每个元素包含例如＜name＞</name＞元素，一个＜type＞</type>元素，然后是<activity>列表</activity>元素来表示您可以在这样的地方执行的活动。因此，您的XML结构如下所示：

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

如果有一个JSON对象来表示这个精确的结构，那该有多酷，这样你就可以：

将此对象原样存储在任何类似CouchDB的数据库中从$_POST[]服务器端读取它，并检索一个正确的嵌套数组，然后可以对其进行语义操作使用一些服务器端脚本将其转换为格式良好的XML文件（即使您事先不知道其确切结构）在任何类似Node.js的服务器脚本中使用它

好的，现在我们需要考虑表单如何表示XML文件。

当然，＜form＞标记是根，但是我们有一个＜place＞元素，它是一个容器，而不是数据元素本身，所以我们不能为它使用输入标记。

这里是<fieldset>标记的用武之地！我们将使用＜fieldset＞标记来表示表单/XML表示中的所有容器元素，因此得到如下结果：

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

正如您在这个表单中看到的，我们打破了唯一名称的规则，但这是可以的，因为它们将被转换为一个元素数组，因此只能由数组中的索引引用。

此时，您可以看到表单中没有类似于name=“array[]”的名称，而且一切都很漂亮、简单、语义。

现在我们希望将此表单转换为JSON对象，该对象如下所示：

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

为了做到这一点，我在这里开发了一个jQuery插件，有人在这个CodeReview线程中帮助优化了这个插件，看起来像这样：

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

我还写了一篇博文来解释这一点。

这会将表单中的所有内容转换为JSON（甚至是单选和复选框），您只需调用

$.post('script.php',('form').toJSO(), ...);

我知道有很多方法可以将表单转换为JSON对象，当然.serialize（）和.serializeArray（）在大多数情况下都非常有效，而且主要是为了使用，但我认为将表单编写为具有有意义名称的XML结构并将其转换为格式良好的JSON对象的整个想法值得一试，如果您需要检索动态生成的表单数据，那么可以添加同名输入标记而不必担心这一事实也非常有用。

我希望这对某人有所帮助！

我发现所选解决方案有问题。

当使用具有基于数组的名称的表单时，jQueryserializeArray（）函数实际上会失效。

我有一个PHP框架，它使用基于数组的字段名，允许在多个视图中将同一表单多次放在同一页面上。这可以方便地将添加、编辑和删除都放在同一页上，而不会出现表单模型冲突。

由于我想在不使用这种绝对基本功能的情况下对表单进行序列化，我决定编写自己的seralizeArray（）：

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

请注意：这也适用于表单submit（）之外，因此如果在代码的其余部分发生错误，如果您单击“保存更改”的链接按钮，表单将不会提交。

还请注意，此函数不应仅用于验证表单以收集要发送到服务器端进行验证的数据。使用这种弱的和大量分配的代码将导致XSS等。