发布一个包含 n 个项目的数组以形成答案

【问题标题】：POSTing an array of n items to form发布一个包含 n 个项目的数组以形成
【发布时间】：2012-08-08 04:47:34
【问题描述】：

我想将一个长度为 n 的数组发布到表单中。处理这个问题的最佳方法是什么？

该对象是一个 Timesheet，它有一个日期和一个 Lines 数组。

行具有持续时间、类别和注释字段。

我的表单有一个日期字段，一行开始，jQuery 会根据需要添加更多行。

我知道我需要以某种方式使用括号表示法，但我不知道如何考虑我有两个嵌套的对象。

FWIW，东西的应用端在Node.js和express中。

<form id="timesheet" method="POST" action="/timesheets">
  <label>date for timesheet</label>
  <input type="date" name="date"/><br/>
  <ol id="timesheet-list">
    <li>
      <input type="number" name="hours" min="0" value="0" step=".25"/>
      <input type="text" name="category"/>
      <input type="text" name="details"/>
    </li>
  </ol>
  <input type="submit"/>
</form>

<a id="addItem" href="#">Add a new line item</a>

<script type="text/javascript">
  $('#addItem').click(function(e){
    e.preventDefault();
    $('#timesheet-list').append('<li><input type="number"> <input type="text"> <input type="text"></li>');
  });
</script>

【问题讨论】：

“我想将 [...] 发布到表单” - 标准 html 表单应该可以很好地处理这个问题：只需提供您在添加中创建的元素- item 函数与起始行和服务器端的名称相同，您应该能够将它们视为数组。嵌套对象是什么意思？

标签： javascript html forms node.js

【解决方案1】：

如果您想使用 jQuery serializeArray 方法将输入值作为 JSON 数据提交，我认为您可以序列化输入值

      $('form').submit(function() {
          alert($(this).serializeArray());
          return false;
      });

注意，要使上述内容起作用，您的 <input ...> 必须具有 name 属性。

对于可能希望将更复杂的数据（对象类型）编码为表单数据的其他人，this answer here 很有帮助。基本上，它使用 serializeArray 函数将其转换为 JavaScript 对象（包含以下代码，因为链接可能会随着时间的推移变为非活动状态）

  $.fn.serializeObject = function()
  {
   var o = {};
   var a = this.serializeArray();
    $.each(a, function() {
       if (o[this.name] !== undefined) { //check to see if name attribute exists
           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;
 };

使用功能

 $(function() {
     $('form').submit(function() {
         $('#result').text(JSON.stringify($('form').serializeObject()));
      return false;
    });
});

【讨论】：

【解决方案2】：

您想将JSON 中的数据格式化为POST 到您的表单吗？

您的 JSON 对象看起来像这样。

// Entire object is a representation of a 'Timesheet'
{
  date: '8-8-2012',
  lines: [ // Array of objects, each storing a duration, catagory and note.
    {
      duration: 0,
      catagory: 'whatever',
      note: 'whatever'
    },
    { // Have as many of these as you please.
      duration: 123,
      catagory: 'another',
      note: 'moar notes'
    },
  ]
}

当你收到这个对象时，你可以像这样访问数据：

data = getTimesheet(); // Assume this function gets the above JSON
data.date;
for(var i=0; i<data.lines.length; i++) {
    data.lines[i].duration;
    data.lines[i].catagory;
    data.lines[i].note;
}

【讨论】：