如何通过 Ajax 发送由一堆输入字段创建的数组？答案

【问题标题】：How can I send an array created by a bunch of input fields via Ajax?如何通过 Ajax 发送由一堆输入字段创建的数组？
【发布时间】：2017-12-13 14:37:35
【问题描述】：

我想通过我的输入字段创建一个数组并通过 ajax 发送这个数组：

var map = {};
$(".data_list").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.id); 
data = map;


$.ajax({
            url: "update.php",
            data: {
                data: data,
            },
            type: "POST",
            success: function (data) {
            alert("success");
            }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='data_list' name='id[]" + "' type='text' value='24'/>
<input class='data_list' name='name[]" + "' type='text' value='test'/>

但我认为我的数组没有正确创建，因为我的警报测试未定义。

【问题讨论】：

那么输入的名称包含[]，因此不会定义属性ID

标签： jquery arrays ajax dictionary

【解决方案1】：

在要提交其值的表单控件上使用 jQuery https://api.jquery.com/serialize/ 方法，并将结果作为 data 参数传递。像

$.ajax({ data: $(".data_list").serialize(), 
          /* url: ... etc .*./  });

【讨论】：

顺便说一句，我认为您也可以在这里使用简写 $.post()，而不是 $.ajax()

【解决方案2】：

首先，您的输入名称有一个额外的“+”。其次，名称包含[]，因此您需要像“关联数组”一样访问它，obj[attribute]发送数据时，它将包含[]，您的服务器端将能够将其解析为数组

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='data_list' name='id[]' type='text' value='24'/>
<input class='data_list' name='name[]' type='text' value='test'/>

var map = {};
$(".data_list").each(function() {
		console.log($(this).attr("name"));
    map[$(this).attr("name")] = $(this).val();
});

alert(map["id[]"]); 
data = map;


$.ajax({
            url: "update.php",
            data: {
                data: data,
            },
            type: "POST",
            success: function (data) {
            alert("success");
            }
})

【讨论】：