是否可以将 FormData 应用到现有表单？

Question

如果我有一个现有的表单，我知道我可以通过将表单传递给 FormData 构造函数来有效地将其“转换”为 FormData，如下例所示：

var myForm = document.getElementById('myForm');

var myFormData = new FormData(myForm);
//Now myFormData contains all fields from myForm

有什么方法可以有效地执行此操作的逆操作吗？我有一个现有的 FormData 对象，我想将其字段应用到 DOM 中的表单。像

myForm.setFormData()

（这完全是我编造的）这个例子：

var myFormData = new FormData();
myFormData.append(...); //etc...

var myForm = document.getElementById('myForm');
myForm.setFormData(myFormData);
//Now myForm contains all fields from myFormData

有什么方法可以将FormData应用到现有的表单上吗？

Answer 1

Musa 的评论与 MDN 文档使用 FormData 对象: 一致

FormData

对象可让您编译一组键/值对以使用XMLHttpRequest发送。它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。¹

不幸的是，（目前）似乎没有这样的方法可以将

FormData

对象中的字段应用到 <form> 上。

如

this answer所示，可以迭代 FormData 对象的条目，查找表单中的输入并适当设置 checked

 或 

value

 属性。

function formDeserialize(form, data) {
    const entries = (new URLSearchParams(data)).entries();
    for(const [key, val] of entries) {
        //http://javascript-coder.com/javascript-form/javascript-form-value.phtml
        const input = form.elements[key];
        switch(input.type) {
            case 'checkbox': input.checked = !!val; break;
            default:         input.value = val;     break;
        }
    }
}
document.addEventListener('click', event => {
    if (event.target.nodeName === 'BUTTON') {
        const myFormData = new FormData();
        myFormData.append('username', 'wxactly');
        myFormData.append('language', 'JavaScript');
        myFormData.append('human', true);
        myFormData.append('color', 'blue');
        formDeserialize(document.forms[0], myFormData);
    }
});

<form>
  <div>
    <label>
      Username: <input type="text" name="username" />
    </label>
  </div>
  <div>
    <label>
      Language: <input type="text" name="language" />
    </label>
  </div>
  <div>
    <label>
      Human: <input type="checkbox" name="human" />
    </label>
  </div>
    <div>
      Favorite Color:
      <label>
        Red
        <input type="radio" name="color" value="red" />
        </label>
      <label>
        Blue
        <input type="radio" name="color" value="blue" />
      </label>
  </div>

</form>
<button>Deserialize FormData</button>

---

1https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects