HTML在构造参数时遵循哪些规则？

Question

我正在使用Rails基于一组复杂的嵌套属性自动神奇地创建子对象.因此,我需要以非常特殊的方式嵌套参数.显然我意识到我可以用JS构建它们,但是我希望表单的顺序自动帮助构造.对于上下文,我有2列,由2 <td>秒表示.每列可以创建新记录或编辑现有记录.当然,当要修改现有记录时,必须传递记录的id.

呈现的HTML如下:

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="delivery" data-instructions="test instructions" data-id="1" data-amount="20">
  <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="delivery">
    <input class="labeler-response" name="type_logistics_attributes[][id]" type="hidden" value="1">
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" value="test instructions">
  </span>
</td>

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0">
  <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged">
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup">
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20">
    <span class="area-to-inject-type-of-amount">
      <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics">
    </span>
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions">
  </span>                      
</td>

在这种情况下,第一个<td>是修改id为1的现有记录,而第二个<td>是提供创建新记录的参数.创建新记录时,charged_amounts还会创建子记录.因此,这些是我期望的参数:

"type_logistics_attributes"=>[
  {"id"=>"1", "instructions"=>"test instructions"},
  {"type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"}
]

相反,我得到以下内容:

"type_logistics_attributes"=>[
  {"id"=>"1", "type_of_logistics"=>"pickup", "instructions"=>"test instructions", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}]}, 
  {"instructions"=>"123 Fake street"}
]

不知何故,<td>边界不起作用,并且子charged_amount属性以某种方式被集中到第一个<td>现有的记录修改中.

谢谢!

Answer 1

它不是<td>或任何类似的 HTML 元素，为输入创建“边界”，它只是<form>元素。<form>提交表单时，浏览器将标记内的所有输入作为参数发送。您可能将两列都放在一列中<form>，这就是为什么两列中的参数在params.