如何将多维数组添加到序列化的 POST 数据中？

Question

所以，我正在尝试将表单数据发布到我的 API……我想在发布数据中添加一个数组（多维），但我似乎无法弄清楚。

这是我目前得到的：

let move_type = $("#move_type").text();
let loc_id = $("#loc_id").val()
// check a few vars first


let postvars;
postvars = $('#myForm input').serializeArray();
postvars.push({name: 'loc_id', value: loc_id}); //uncomment if you need to add vars in the postvars
postvars.push({name: 'move_type', value: move_type}); //uncomment if you need to add vars in the postvars


//loop through product ques
let prods_r = [];
$(".que_item").each(function(index){
    let prod_id = $(this).find(".prod_id").text();
    let title = $(this).find(".title").text();
    let qty = $(this).find(".qty").val();
    if(qty<1) {
        showAlert("Please supply qty on all items in que. " + title);
        return false;
    }
    prods_r[prod_id] = [];
    prods_r[prod_id]["title"] = title;
    prods_r[prod_id]["qty"] = qty;


})

postvars.push(prods_r); 

提交时，我将 prods_r 的变量设为“未定义”，没有任何值。

我也尝试了以下行，但无济于事

postvars.push({name: `prods_r`, value:prods_r });

我肯定在这里遗漏了什么吗？

Answer 1

您需要将所有值推送到外部数组，否则所有值都会丢失，它会返回空数组。

演示代码：

$("form").on("submit", function(e) {
  e.preventDefault()
  let move_type = $("#move_type").text();
  let loc_id = $("#loc_id").val()
  let postvars;
  postvars = $('#myForm input').serializeArray();
  postvars.push({
    name: 'loc_id',
    value: loc_id
  }); 
  postvars.push({
    name: 'move_type',
    value: move_type
  });
  var dataa = new Array() //declare  this
  $(".que_item").each(function(index) {
    let prod_id = $(this).find(".prod_id").text();
    let title = $(this).find(".title").text();
    let qty = $(this).find(".qty").val();
    if (qty < 1) {
      showAlert("Please supply qty on all items in que. " + title);
      return false;
    }
    var prods_r = {}//create obj
    //add value to it..
    prods_r[prod_id] = {
      "title": title,
      "qty": qty
    }
    dataa.push(prods_r) //push in main array
  })

  postvars.push({
    name: "prods_r",
    value: dataa //passs it here 
  });

  console.log(postvars)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="myForm">
  <input tye="text" name="name" value="abc">
  <input type="submit">
</form>
<div class="que_item">
  <span class="prod_id">1</span>
  <span class="title">Abcd</span>
  <input tye="text" name="ded" class="qty" value="34">
</div>
<div class="que_item">
  <span class="prod_id">2</span>
  <span class="title">Abcd2</span>
  <input tye="text" name="ded" class="qty" value="55">
</div>