Question

假设我的表单中包含一些相互链接的输入。据说我经营一个披萨店，用户提交一份带有披萨订单的表格。每个披萨订单都有一组引用订单的输入：type，option1和option2。如果客户想要更多的比萨，他们可以添加另一组表单输入。下面的代码模拟了2个披萨的订单：

<form action="pizza/get-now.html">
  First Pizza:
       <input type="text" name="pizza" value="quattro stagioni"><br>
       <input type="text" name="option1" value="extra bacon"><br>
       <input type="text" name="option2 value="no tomatoes"><br>

  Second Pizza:
       <input type="text" name="pizza" value="vegetarian"><br>
       <input type="text" name="option1" value="extra mushrooms"><br>
       <input type="text" name="option2 value="no cheese"><br>


  <button type="submit">Submit</button>
</form>

如果我使用 jQuery's serializeArray() ，我有一些不确定因素：

服务器＆＃34;知道＆＃34; [默认]这些输入是否已分组，它们代表两个订单？它是serializeArray()附带的东西吗？我问，因为在网络上提交，我看到的只是名称和价值对。
如果没有，在客户端（如果有的话）处理这些类型的分组表单的最佳方法是什么，以便奶酪怪物得到他/她的修复？
< / LI>

Answer 1

服务器“知道”[默认]这些输入是否已分组，它们代表两个订单？它是'serializeArray（）'附带的东西吗？我问，因为在网络上提交，我看到的只是名称和价值对。

这完全取决于服务器和发送数据的格式。例如，在PHP中，您需要将[]附加到字段名称的末尾以便对其进行整理。在C＃MVC中，您需要将模型定义为每个项目具有List<string>属性，或者更好地List<Pizza>并将比萨饼作为整个实体绑定。

如果没有，在客户端（如果有的话）处理这些类型的分组表单的最佳方法是什么，以便奶酪怪物得到他/她的修复？

作为上述说明的扩展，它取决于您的服务器端代码以及它希望您发送数据的格式。

我意识到这可能不是你所希望的答案，但鉴于你问题中的信息，可以提供所有这些。但一般情况下，serializeArray()在发送表单数据时没有多大帮助。

Answer 2

要完成您的方法，您应该像这样组织表单：

<form action="pizza/get-now.html">
  First Pizza:
       <input type="text" name="pizza[0]" value="quattro stagioni"><br>
       <input type="text" name="pizza[0][option1]" value="extra bacon"><br>
       <input type="text" name="pizza[0][option2]" value="no tomatoes"><br>

  Second Pizza:
       <input type="text" name="pizza[1]" value="vegetarian"><br>
       <input type="text" name="pizza[1][option1]" value="extra mushrooms"><br>
       <input type="text" name="pizza[1][option2]" value="no cheese"><br>


  <button type="submit">Submit</button>
</form>

javascript / jquery ajax：具有相同名称属性

2 个答案: