使用jQuery发送具有相同名称的表单元素数组的表单数据

Question

我有这个表格：

...
        <td><input type="text" name="code[]" value="" /></td>
        <td>
              <select class="selectProductOrders" name="selectProductOrders[]">
                  <option value="default" disabled selected>Select a product</option> 
              </select>
        </td>
        <td><input type="number" pattern="[0-9]*" name="rsp[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="trade[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="discount[]" value="0" /></td>
        <td><input type="number" pattern="[0-9]*" name="qty[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="cost[]" value="" /></td>
...

上面和下面还有更多，但这是重要的部分。表格中的这一行根据订单中有多少产品重复，所以我认为在服务器端解析每个订单项目元素的数组会更容易。而且因为表格很大，我决定使用jQuery.serialize() 以json 格式发送数据。

它发送表单的其余部分正常，但不发送上述每个输入元素的数组，它只发送最后一行。

对此有解决方案的想法吗？我想我可以手动将表单中的值输入为 json 格式，但我想解决序列化问题。

谢谢！

Answer 1

如果输入具有相同的名称，我认为您不能使用 jQuery.serialize()。

要将数组发送到服务器，我建议您对输入进行编号：

<td><input type="text" name="code[0]" value="" /></td>
    <td>
          <select class="selectProductOrders" name="selectProductOrders[0]">
              <option value="default" disabled selected>Select a product</option> 
          </select>
    </td>
    <td><input type="number" pattern="[0-9]*" name="rsp[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="trade[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="discount[0]" value="0" /></td>
    <td><input type="number" pattern="[0-9]*" name="qty[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="cost[0]" value="" /></td>


<td><input type="text" name="code[1]" value="" /></td>
    <td>
          <select class="selectProductOrders" name="selectProductOrders[1]">
              <option value="default" disabled selected>Select a product</option> 
          </select>
    </td>
    <td><input type="number" pattern="[0-9]*" name="rsp[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="trade[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="discount[1]" value="0" /></td>
    <td><input type="number" pattern="[0-9]*" name="qty[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="cost[1]" value="" /></td>

这可确保您的所有值都发送到服务器。