forms - 使用 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>

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