问答

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

作者:admin 2021-04-21 我要评论

数组表单例如 input type="text" value="" name="data[0][url]"input type="text" value="" name="data[1][url]"input type="text" value="" name="data[2][url]...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

数组表单例如

<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数据结构为

image.png

但是后端要要求提交之前就是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;
};

输出结果如下,示例代码有点小瑕疵不要介意:
图片.png

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js如何处理表单中的数组方式?

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

  • 基于vue框架的web用Chrome打开,平板黑

    基于vue框架的web用Chrome打开,平板黑

  • nginx如何关闭强制HTTPS

    nginx如何关闭强制HTTPS

  • Qt中QListWidget是否拥有和Android中Re

    Qt中QListWidget是否拥有和Android中Re

腾讯云代理商
海外云服务器