使用动态输入将表单数据序列化为 JSON

Posted 2023-05-09

【中文标题】使用动态输入将表单数据序列化为 JSON

【英文标题】：Serialize form data to JSON with Dynamic Inputs

【发布时间】：2016-11-16 13:06:26

【问题描述】：

我正在尝试序列化我的表单数据（名称数组），到目前为止我只能序列化数组中的最后一个对象。我可以动态附加一组表单字段，当我单击提交时，它仍然只会在数组中附加新的（最后一个）对象。我已经尝试了很多不同的方法来做到这一点，这是我最接近的。这是操场上的代码 - http://www.bootply.com/pv7fFLC1uJ。我想看的例子：

  timeZonePicker: "-7",
  start: "09:00",
  end: "17:00",
  content: "San Francisco"


  timeZonePicker: "-3",
  start: "09:00",
  end: "17:00",
  content: "São Paulo"

html

<form class="form-inline fields_wrapper">
    <select class="form-control timeZonePicker" name="timeZonePicker[]" id="timeZoneId">
      <option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option>......
    </select>
    <input type="time" class="form-control start" name="start[]" value="">
    <input type="time" class="form-control end" name="end[]" value="">
    <input type="text" class="form-control content" name="content[]" value="">
</form>

jQuery

$.fn.serializeObject = function(options)  
    var data = $(this).serializeArray(), obj = ;   
    $.each(data, function(i, el) 
        console.log(data);
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") 
          key = key.slice(0,-2);
          
        if (el.name in options) 
            obj[options[key]] = obj[options[key]] || ;
            obj[options[key]][key] = el.value;
        
        else 
            obj[key] = el.value;
        
    );
    return obj;
;

【问题讨论】：

你能把问题简化为更简单的问题吗？代码和 HTML 等有很多事情要做，所以如果它是一个更精简的表单和代码，就更容易解决真正的问题，也更容易让其他人了解所涉及的一切。

感谢您的建议。我清理了一下代码。

【参考方案1】：

您没有创建和返回数组。您的对象属性在每个迭代中都会被覆盖，并且您只返回一个对象，它是最后一次迭代

尝试（未经测试）：

$.fn.serializeObject = function(options)  
    var data = $(this).serializeArray(), 
        // results array
        res = [];   
    $.each(data, function(i, el) 

      var obj=

        console.log(data);
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") 
          key = key.slice(0,-2);
          
        if (el.name in options) 
            obj[options[key]] = obj[options[key]] || ;
            obj[options[key]][key] = el.value;
        
        else 
            obj[key] = el.value;
        

      res.push(obj)
    );
  // return array instead of the single object
    return res;
;

如果您为每行数据的包装器提供一个通用类并循环遍历这些类，而不使用serializeArray()，则整个事情会简单得多。

【讨论】：

这将返回以下内容：timeZonePicker: ""、start: ""、end: "" 等。但感谢您的帮助，我会尝试使用您更简单的建议。

【参考方案2】：

正如 charlietfl 所说，您只返回一个对象，而不是数组。

按照您的操作方式，您可以同时遍历表单中的所有对象。如果你想走这条路，你必须知道你何时创建了一个对象，这样你就可以将它添加到数组中。

这是一个简单的解决方案（虽然不是最漂亮的）：

//build the json objects for each set of form fields
$.fn.serializeObject = function(options)  
  var data = $(this).serializeArray(), obj = , all = []; 
    $.each(data, function(i, el) 
        var key = el.name;
        //remove the brackets from each html name array
        if (key.slice(-1) == "]") 
          key = key.slice(0,-2);
          
        if (el.name in options) 
            obj[options[key]] = obj[options[key]] || ;
            obj[options[key]][key] = el.value;
        
        else 
            obj[key] = el.value;
        

      if ((i + 1) % Object.keys(options).length == 0) 
        all.push(obj);
        obj = ;
      
    );
    return all;
;

【讨论】：

这行得通，谢谢！我会看看我是否找不到更漂亮/更简单的解决方案。