Javascript 如何使用ajax将jquery for循环创建的输入值发送到php

我有一个向表单中添加新字段的按钮，另一个向服务器端（php）提交输入字段值的按钮。 我正在尝试获得将动态创建的表单输入中的值发送到php的最佳方法

这是我试过的

$('#submit').on("click", function(e) {
   e.preventDefault();
   for(var i = 1; i <= 9; i++) {

     if ($('label[name="men'+i+'"]').length) { //for each [i] check if man field exist 
       var manName  = $('select[id="manName'+i+'"]').val();
       var manAge  = $('select[id="manAge'+i+'"]').val();
       if (manName.length < 1) {
         //show input error on the form
       } else {
         //set value for each manName field created 
         window["manName" + i] = manName;
       }

       if (manAge.length < 1) {
         //show input error on the form
       } else {
         //set value for each manAge field created 
         window["manAge" + i] = manAge;
       }
     }
   } else {
     //if man field [i] was not created
     window["manName" + i] = "";
     window["manAge" + i] = "";
     //set man field [i] to empty/null
   }

 //and more of the above to check for women and children fields

}

这是可行的，但在它响应之前会冻结一段时间

---

那么有没有合适的方法来实现这一点

我认为主要冻结是由

未捕获范围错误引起的：超过了最大调用堆栈大小

，这意味着您在代码中的某个地方进行了一些无限递归调用。 但也许您应该优化代码，以尽量减少使用jQuery扫描DOM元素

将一些类名添加到每个输入的组包装器（假设

.js inputs man

）以获得下一个HTML

---

我认为主要冻结是由

uncaughtrangeerror引起的：超过了最大调用堆栈大小
，这意味着您在代码中的某个地方进行了一些无限递归调用。
但也许您应该优化代码，以尽量减少使用jQuery扫描DOM元素

将一些类名添加到每个输入的组包装器（假设
.js inputs man
）以获得下一个HTML
您的for循环中可能存在某种错误（可能在代码的其他地方，
i
的值正在更改，或者您的循环正在调用另一个循环，等等）

如果你想找到它失败的地方，我建议你删除（或注释）代码片段，直到它停止冻结。然后重构坏的部分，直到找到错误

下面是一个示例，说明如何在不循环元素ID的情况下实现所需的功能。从技术上讲，它没有问题，但ID的目的是标记唯一的元素。如果需要不止一个类，那么应该使用类。这将避免在删除列表ITEN时索引变量和许多未来的麻烦


$（'button.add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var div=$（''）；
div.append（“”+this.id+“”）
div.append（'name'）；
第3款（“年龄”）；
var delBt=$（'X'）；
delBt.on（'click'，函数（）{
$（this.parent（）.remove（）；
});
附加分区（delBt）；
$（'#inputContainer'）。追加（div）；
});
$（“#提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
var数据=[]；
$（'#inputContainer div'）。每个（函数（）{
var sex=$（'.sex'，this.text（）；
var name=$（'.name input'，this.val（）；
var age=$（'.age input'，this.val（）；
数据推送（{性别、姓名、年龄}）；
});
console.clear（）；
控制台日志（数据）；
/*
$.ajax({
类型：“POST”，
url:“send.php”，
数据：数据，
成功：函数（数据）{console.log（数据）}
});
*/
});
#输入容器{
填充：1em；
}
输入{
宽度：5em；
边缘：0.5em；
}
输入：无效{
边框：2个红色虚线；
}
h3{
保证金：0；
}

加人
加上女人
添加子项
您的for循环中可能存在某种错误（可能代码中的其他地方，
i
的值正在更改，或者您的循环正在调用另一个循环，等等）

如果你想找到它失败的地方，我建议你删除（或注释）代码片段，直到它停止冻结。然后重构坏的部分，直到找到错误

下面是一个示例，说明如何在不循环元素ID的情况下实现所需的功能。从技术上讲，它没有问题，但ID的目的是标记唯一的元素。如果需要不止一个类，那么应该使用类。这将避免在删除列表ITEN时索引变量和许多未来的麻烦


$（'button.add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var div=$（''）；
div.append（“”+this.id+“”）
div.append（'name'）；
第3款（“年龄”）；
var delBt=$（'X'）；
delBt.on（'click'，函数（）{
$（this.parent（）.remove（）；
});
附加分区（delBt）；
$（'#inputContainer'）。追加（div）；
});
$（“#提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
var数据=[]；
$（'#inputContainer div'）。每个（函数（）{
var sex=$（'.sex'，this.text（）；
var name=$（'.name input'，this.val（）；
var age=$（'.age input'，this.val（）；
数据推送（{性别、姓名、年龄}）；
});
console.clear（）；
控制台日志（数据）；
/*
$.ajax({
类型：“POST”，
url:“send.php”，
数据：数据，
成功：函数（数据）{console.log（数据）}
});
*/
});
#输入容器{
填充：1em；
}
输入{
宽度：5em；
边缘：0.5em；
}
输入：无效{
边框：2个红色虚线；
}
h3{
保证金：0；
}

加人
加上女人
添加子项
它以什么方式“冻结”？服务器需要很长时间才能响应吗？或者客户端代码正在锁定浏览器几分钟？是的，客户端，浏览器控制台中出现此错误“Uncaught RangeError:超出最大调用堆栈大小”，这意味着您在代码中的某个地方进行了一些无限递归调用。您可以在导致此错误的函数中设置断点，以找出问题所在。它以何种方式“冻结”？服务器需要很长时间才能响应吗？或者客户端代码正在锁定浏览器几分钟？是的，客户端，浏览器控制台中出现此错误“Uncaught RangeError:超出最大调用堆栈大小”，这意味着您在代码中的某个地方进行了一些无限递归调用。您可以在导致此错误的函数中放置断点，以找出问题所在。非常感谢，显然用窗口收集数据是个问题，所以我重建并使用了数据，它工作得非常好。非常感谢，显然用窗口收集数据是个问题，所以我重建并使用了数据，它工作得非常好。
$.ajax
   ({
   type:"POST",
   url: "send.php",
   data: {"manName1": manName1, "manAge1": manAge1, "manName2": manName2, "manAge2": manAge2, "manName3": manName3, "manAge3": manAge3, "womanName1": womanName1, "womanAge1": womanAge1, "womanName2": womanName2, "womanAge2": womanAge2 }, //and so on for the rest of the women and children
    //cache: false,
    success: function(data) { 
    console.log(data)
    }
    });

<div class="js-inputs-man">
    <select id="manName1"></select> 
    <select id="manAge1"></select> 
</div>

$('#submit').on('click', function(e) {
    e.preventDefault();

    var inputs = $('.js-input-man');

    if (input.length === 0) {
        //show input error on the form
    }

    var data = {}

    inputs.each(function (i, input) {
        var elem = $(input);

        data['manAge' + i] = elem.find('[id="manAge' + i +'"]').val();
        data['manName' + i] = elem.find('[id="mannName' + i +'"]').val();
    });

    // similar code for women and children which you can optimize too to not repeat it

    $.ajax({
        type:"POST",
        url: "send.php",
        data: data,
        success: function(data) { 
            console.log(data)
        }
    });
}