我需要使用 ajax 提交附加功能添加的附加字段答案

【问题标题】：I need to submit additional fields added by append function by using ajax我需要使用 ajax 提交附加功能添加的附加字段
【发布时间】：2019-06-23 22:50:46
【问题描述】：

我遇到了关于使用 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>

点击按钮add a new row 后，我得到更多这样的两个字段

    <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"];
       }

错在哪里？

【问题讨论】：

你不能（如果你想让事情正确）有 2 个 id 属性，就像 id="firstName" 一样，每个添加的 html 块都有一次。
如果您使这些 id 独一无二，您可以在 ajax 调用中将它们添加到您的数据结构中
或者在类名上使用each.，并在 ajax 调用中将数据添加到您的数据结构中

标签： javascript php jquery ajax append

【解决方案1】：

你可以使用表单数据

    var data = new FormData($('form')[0]);
    data .append('extra', add_data);

或者按类进行序列化或序列化数组，我会 seggust

var form_data = $('.post_these').serialize();

PS：post_these 是输入字段类

在 PHP 中按名称访问

$firstName = $_POST['firstName'];

或者当数据是数组时创建一个对象

$data= (object) $_POST['data'];
$data-YfirstName; // use this way

PS 用它来调试，检查你的控制器你收到了什么

echo '<pre>';
print_r($_POST);
echo '</pre>';
exit();

【讨论】：

谢谢！但我需要知道如何将字段名称与值分开？ b'se 接收到的数据是这样的 firstName=john&lastName=Doe&firstName=anna&lastName=kondo

【解决方案2】：

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

既然您仍然使用 jquery，请使用 $('form').serialize() 或 $('form').serializeArray() 作为数组输出来获取所有表单输入及其值。不过，在执行此操作之前，您必须将这些输入包装在表单元素中。

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

【讨论】：