数组表单例如
<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格式呢???
###奇怪的需求,话说数组的形式明明更适合表单。
虽然似乎没有原生 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;
};
输出结果如下,示例代码有点小瑕疵不要介意:
你给出的就是标准的JSON格式数据啊。
json数据格式是支持数组的。