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>

点击按钮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"];
       }

错误在哪里？

Answer 1

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

由于无论如何都在使用jquery，因此对数组输出使用$('form').serialize()或$('form').serializeArray()来获取所有表单输入及其值。但是，您必须先将这些输入包装在form元素中。

或如上所述，手动遍历元素并获取类似的值。

Answer 2

您可以使用formdata

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

或我将按类进行seriallize或seriallizeArray

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();

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

2 个答案: