如何获取Form.io中Data Component的JSON格式数据用于AJAX提交？

方法1：使用Form.io内置的getSubmission()方法 #

Form.io的表单实例自带getSubmission()方法，能直接返回结构化的JSON数据，自动处理Data Component的嵌套字段，不用手动解析data[FirstName]这类格式的键名。

示例代码：

// 假设表单实例已通过Formio.createForm初始化并存储在formioForm变量中
const submissionData = formioForm.getSubmission();

// 将结构化JSON通过AJAX提交到自有服务器
fetch('你的服务器接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(submissionData),
})
.then(res => res.json())
.catch(err => console.error('提交失败:', err));

返回的submissionData是标准JSON结构，示例如下：

{
  "data": {
    "FirstName": "张三",
    // 其他Data Component字段...
  },
  // 表单元数据...
}

方法2：手动解析表单数据为JSON #

如果不想依赖Formio内置方法，可手动遍历表单元素，将data[xxx]格式的字段转换为嵌套JSON：

function parseFormToJson(formEl) {
  const formData = new FormData(formEl);
  const result = { data: {} };
  
  formData.forEach((value, key) => {
    // 匹配data[xxx]格式的键名
    const keyMatch = key.match(/data\[([^\]]+)\]/);
    if (keyMatch) {
      result.data[keyMatch[1]] = value;
    } else {
      // 处理非Data Component的普通字段
      result[key] = value;
    }
  });
  
  return result;
}

// 使用示例
const targetForm = document.getElementById('你的表单ID');
const jsonData = parseFormToJson(targetForm);

// AJAX提交
fetch('你的服务器接口地址', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(jsonData),
});

如果Data Component存在多层嵌套（比如data[User][FirstName]），可扩展上述解析函数处理深层结构，但更推荐方法1——Formio内置方法会自动处理所有组件类型的解析逻辑，避免手动处理的遗漏。

内容的提问来源于stack exchange，提问作者Gianluca Lodigiani