JQuery Ajax 在请求中发送输入数组的巧妙方式？-解网

问：

看起来我的主要问题是在我应该使用 map 的时候使用 .val（），谢谢@Barmar！

尽管我仍在寻找一种方法来实现我帖子底部的第二个数组结构。似乎 HTML 结构必须是：

<div>
   <input type="text" name="student[1][name]">
   <input type="number" name="student[1][score]">

   <input type="text" name="student[2][name]">
   <input type="number" name="student[2][score]">

   <input type="text" name="student[3][name]">
   <input type="number" name="student[3][score]">
</div>

这样做的挑战是ID号是动态的，所以我不确定如何在Jquery选择器中安装它。我只是按“学生”选择，即

let input_names = $('input[name^="student["]').map(function() {
    return this.value;
}).get();

我有很多相同类型的输入，所以我希望它们以数组形式出现，即

<div>
   <input type="text" name="name_[1]">
   <input type="number" name="score_[1]">

   <input type="text" name="name_[2]">
   <input type="number" name="score_[2]">

   <input type="text" name="name_[3]">
   <input type="number" name="score_[3]">
</div>

括号之间的数字是将相关元素组合在一起的 ID。我希望能够在 AJAX 请求中发送数组中的所有值，但似乎无法弄清楚。只发送第一个元素，而不是数组

let input_names = $('input[name^="name_"]').val();
let input_scores = $('input[name^="score_"]').val();

$.ajax({
    url: "../util/funcs.php",
    async: true,
    data: {
        a: "backendFunction",
        input_names: input_names,
        input_scores: input_scores
    }
})
.done(function(data) {
    console.log("Success");
})
.fail(function() {
    console.log("Error");
.always(function() {
    // alert( "complete" );
});

我想要一种方法将它们整齐地发送到后端，可以按名称参数作为单独的数组，也可以理想地按 ID 分组。因此，_REQUEST 美元如下所示：

[ids] =>
    [1, 2]
[names] =>
    ["alex", "john"]
[scores] =>
    [30, 70]

甚至更好：

[1] =>
    [name]  => "alex"
    [score] => "30"
[2] =>
    [name]  => "john"
    [score] => "70"

不幸的是，无论我尝试哪种方式，AJAX 似乎只发送每个输入的第一个，而不是数组。请帮忙！

javascript html jquery 数组 ajax

$(function() {
  let result = $('input').map(function() {
    return { name: this.name, value: this.value };
  }).get().reduce((acc, obj) => {
    let num = obj.name.replace(/[^\d]+/g, '');
    let key = obj.name.replace(/_.*$/, '');
    if(!acc[num]) {
      acc[num] = {};
    }
    acc[num][key] = obj.value;
    return acc;
  }, {});
  console.log('result:', result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <input type="text" name="name_[1]" value="Alex">
   <input type="number" name="score_[1]" value="101">
   <input type="text" name="name_[2]" value="Berta">
   <input type="number" name="score_[2]" value="102">
   <input type="text" name="name_[3]" value="Dora">
   <input type="number" name="score_[3]" value="103">
</div>

输出：

result: {
  "1": {
    "name": "Alex",
    "score": "101"
  },
  "2": {
    "name": "Berta",
    "score": "102"
  },
  "3": {
    "name": "Dora",
    "score": "103"
  }
}

笔记：

首先，获取所有输入元素并构建一个对象数组{ name, value }
然后，使用 A 累积所需的对象格式.reduce()
调整 of 和是否有不同的名称输入模式.replace()numkey

1赞 manju nath 1/27/2023 #3

<input type="text" class="name_">
   <input type="number" class="score_">

   <input type="text"  class="name_">
   <input type="number"   class="score_">

   <input type="text"  class="name_">
   <input type="number"   class="score_">
   <input class="submit" type="button" value="submit"  />
<script>
$('.submit').click(function(){
    nam = $('.name_');
    scr = $('.score_');
    naml = nam.length;
    myar = new Array;
    i=0;
    for(i=0;i<naml;i+=1)
    {
    myar[i] = {'name':nam.eq(i).val(),'score':scr.eq(i).val()};
    }
    alert(JSON.stringify(myar));
});
</script>

上一个：使用 URLSearchParams（）时如何处理字符串数组中的逗号

下一个：单击按钮时显示产品详细信息

JQuery Ajax 在请求中发送输入数组的巧妙方式？

JQuery Ajax neat way to send input arrays in the request?

评论

评论