如何在alert弹窗中完整显示FormData表单数据？

直接alertFormData对象只会显示[object FormData]，因为它是特殊的表单数据对象，无法通过默认的toString方法直接读取内容。你可以通过以下两种方式将其转换为可读格式后再弹窗显示：

方法一：转换为键值对字符串 #

添加一个辅助函数遍历FormData的所有条目，拼接成易读的字符串：

// 辅助函数：将FormData转为键值对字符串
function formatFormData(formData) {
  let dataStr = [];
  // 遍历FormData的每个键值对
  for (let [key, value] of formData.entries()) {
    dataStr.push(`${key}: ${value}`);
  }
  // 用换行符分隔每个字段
  return dataStr.join('\n');
}

// 修改保存函数中的alert调用
var SaveProduct = function () {   
    alert("SHOW FORM DATA");
    // 传入FormData对象，转换后再alert
    alert(formatFormData(PreparedFormObj()));
}

方法二：转换为JSON格式字符串 #

如果想要更结构化的显示，可以先把FormData转为普通对象，再序列化为带缩进的JSON字符串：

// 辅助函数：将FormData转为普通对象
function formDataToObject(formData) {
  let formObj = {};
  formData.forEach((value, key) => {
    formObj[key] = value;
  });
  return formObj;
}

// 修改保存函数中的alert调用
var SaveProduct = function () {   
    alert("SHOW FORM DATA");
    // 转为对象后再转成带缩进的JSON字符串
    alert(JSON.stringify(formDataToObject(PreparedFormObj()), null, 2));
}

两种方法都能让你在alert弹窗里看到完整的表单键值数据，选择适合你阅读习惯的方式即可。

内容的提问来源于stack exchange，提问作者Durlove Roy