js如何处理表单中的数组方式？

Question

数组表单例如

<input type="text" value="" name="data[0][url]">
<input type="text" value="" name="data[1][url]">
<input type="text" value="" name="data[2][url]">
<input type="text" value="" name="data[3][url]">

本来呢使用 layui 的

form.on('submit(systemsave)', function(data){
   //data.field 这个提交到后端 用$_POST接受就是个多维数组
   //
})

这个data.field数据结构为

但是后端要要求提交之前就是json格式。
需要吧提交的参数 改为

{"data":[
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
   {"type":"direct","url":"http://www.baidu.com","title":"标题","category":"电影"},
]}

那么无如何将 data.field 数据转换为json格式呢？？？

Answer 1

奇怪的需求，话说数组的形式明明更适合表单。
虽然似乎没有原生 API 可以直接处理，但是可以自己来实现：

<form id="f1" action="" method="post">
  <input type="text" value="a" name="data[0][url]" />
  <input type="text" value="bb" name="data[1][url]" />
  <input type="text" value="ccc" name="data[2][url]" />
  <br /><br />
  <input type="text" value="x" name="data[0][title]" />
  <input type="text" value="yy" name="data[1][title]" />
  <input type="text" value="zzz" name="data[2][title]" />
</form>

const arr = ["url", "title"];
let f1 = document.querySelector("#f1");

const buildRequest = () => {
  let fd = new FormData(f1);
  
  return [getItem(fd, 0), getItem(fd, 1), getItem(fd, 2)];
};

const getItem = (formData, i) => {
  let obj = {};
  arr.forEach((value) => {
    let key = `data[${i}][${value}]`;
    obj[value] = formData.get(key);
  });

  return obj;
};

输出结果如下，示例代码有点小瑕疵不要介意：

Answer 2

你给出的就是标准的JSON格式数据啊。
json数据格式是支持数组的。