将jquery序列化数据加载到表单中答案

【问题标题】：Load jquery serialized data into a form将jquery序列化数据加载到表单中
【发布时间】：2013-01-02 15:09:28
【问题描述】：

我想知道如果您已经序列化了表单，是否有一种简单的方法来填充表单？例如，如果我有var form = $('#myform').serialize()，我应该如何将该数据加载到表单中？是否有可用的 jquery 函数或者我应该手动设置表单中的所有值？

示例形式：

<form id="myform">
    <input type="text" name="first_name"/>
    <input type="text" name="last_name"/>
    <select name="gender">
        <option val=""></option>
        <option val="male">Male</option>
        <option val="female">Female</option>
    </select>
</form>

所以我正在寻找一种快速简便的方法来使用序列化数据重新填充相同的空白表单。

【问题讨论】：

标签： jquery forms serialization populate

【解决方案1】：

虽然@Johan 的回答非常好，但到目前为止对我来说最好的解决方案是 formParams。我使用$('#myform').serializeArray() 将表单转换为json 对象，然后通过ajax 将其发布到脚本中，并将其保存在数据库中。当我不得不重新填充表单时，我只是使用 ajax 请求来获取 json 存储的表单数据并将其与$('#myForm').formParams() 一起使用。

不知道为什么jquery没有在框架中实现这样的功能...

【讨论】：

【解决方案2】：

使用下面的 snippet，但将其更改为使用 id/class 而不是每个元素的 name 属性。

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
       o[this.name] = this.value || '';
       }
    });
   return o;
};

当您的表单数据包含在键值对中时，您可以简单地遍历对象数组并映射值。一些伪代码：

$.each(arr, function(k, v){
    $('#newform .' + key).val(v);
});

【讨论】：