首页 新闻 会员 周边

动态生成的表单字段如何转化为对象属性,作为json递交

0
悬赏园豆:20 [待解决问题]

不使用前端框架,就简单的使用JavaScript、jQuery、Lay UI。
我觉得挺简单的,现在怎么搜不到解决方案了。

我动态添加字段,用中括号和点号作为前缀 name="Products[].Name" ,JavaScript转换json
的还是{... "Products[].Name":"2" ,...},这种形式,没有作为一个集合,我想手工遍历也没有可行的方法,请教各位了

tltgg的主页 tltgg | 初学一级 | 园豆:4
提问于:2023-09-05 17:15
< >
分享
所有回答(3)
0
  1. 使用JavaScript或jQuery获取表单中的所有字段值:
var formData = {};
$('form').find('input, select, textarea').each(function() {
  var fieldName = $(this).attr('name');
  var fieldValue = $(this).val();
  formData[fieldName] = fieldValue;
});
  1. 将字段名中的中括号和点号作为分隔符,拆分为多级属性:
var convertedData = {};
for (var fieldName in formData) {
  var fieldParts = fieldName.split(/[\[\]\.]/).filter(function(part) {
    return part !== '';
  });
  var currentObj = convertedData;
  for (var i = 0; i < fieldParts.length - 1; i++) {
    var part = fieldParts[i];
    if (!currentObj[part]) {
      currentObj[part] = {};
    }
    currentObj = currentObj[part];
  }
  currentObj[fieldParts[fieldParts.length - 1]] = formData[fieldName];
}
  1. 将转换后的对象转化为JSON字符串:
var jsonData = JSON.stringify(convertedData);
lanedm | 园豆:2378 (老鸟四级) | 2023-09-05 19:22

感谢,不过这个不是chatGPT回复的吧?我意思是传统前端模式下,一对多的表单最佳实践是什么,子表动态添加行,一次递交,如何将表单数据转换为json对象的集合。我现在不知道初始化是否应该
name="Products[0].Name"
name="Products[1].Name" 这样命名,添加删除后这个编号并不好维护,数据添加好后又如何转换为json

支持(0) 反对(0) tltgg | 园豆:4 (初学一级) | 2023-09-05 20:22
0

ExtJs懒人笔记(3) 动态Grid的实现
cnblogs.com/lucky_hu/archive/2012/07/15/2591995.html

智客工坊 | 园豆:1855 (小虾三级) | 2023-09-06 07:00

这个和我的问题好像没什么关系吧

支持(0) 反对(0) tltgg | 园豆:4 (初学一级) | 2023-09-06 08:02
0

layui应该提供了form提交,获取表单JSON的方法

你风致 | 园豆:2213 (老鸟四级) | 2023-09-18 17:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册