javascript - 我需要使用ajax提交由append函数添加的 append 字段

Question

我在使用 ajax 提交追加字段时遇到了障碍。

这是我的问题的描述。

我的 HTML 表单是

<div id="append-fields">
    <input name="firstName[]" id="firstName" value="john"></input>
    <input name="lastName[]" id="lastName" value="Doe"></input>
</div>
<button onclick="appendFunction()" type="button">Add a new row</button>

单击按钮添加新行后，我会得到两个这样的字段

    <div id="append-fields">
      <input name="firstName[]" id="firstName" value="anna"></input>
      <input name="lastName[]" id="lastName" value="Kondo"></input>
    </div>

现在我需要用ajax提交以下数据

        firstName = 'john',lastName = 'Doe'
        firstName = 'anna',lastName = 'kondo'

但是我只得到一组这样的数据

     firstName = 'john',lastName = 'Doe'

这是我的脚本

        <script>
        insert = [];
        insert[0] = $("#firstName").val();
        insert[1] = $("#lastName").val();
        $.ajax({
            url: 'myUrl',
            method: 'POST',
            data: {take:insert},
            error: function () {
            },
            success: function (response) {
                $('#overlay').addClass("hidden");
                jQuery('#body').html(response);
            }
        });
   </script>

这是我的 PHP

      function myUrl(){
         $data = $_POST["take"];
       }

错在哪里？

Answer 1

您不应通过 ID 获取数据值，因为不可能有多个相同的 ID 元素。

由于您无论如何都使用 jquery，因此请使用 $('form').serialize() 或 $('form').serializeArray() 进行数组输出获取所有表单输入及其值。不过，在执行此操作之前，您必须将这些输入包装在表单元素中。

或者按照上面的建议，手动循环元素并获取类似的值。