javascript - 新的 FormData 返回空对象

Question

我正在尝试使用 FormData 通过获取 API 在 POST 请求中发送用户输入的数据。问题是，当我用我创建的表单创建一个新的 FormData 对象时，它一直在创建一个空对象——没有条目/键/值。我不确定为什么因为获取表单元素会正确返回表单，所以当我调用 new FormData(form) 时，我得到一个空表单对象。来自MDN documentation , 看来表单应该可以像我的表单那样设置在单独的 div 中。我提供的表单数据是否需要由输入 ID 以外的任何内容引用？谁能建议我如何正确创建 FormData 对象？

谢谢!

/*
* Add event listener on form submission
*/
document.addEventListener('DOMContentLoaded', () => {
    let form = document.getElementById('calc_form');
    form.addEventListener('submit', callServer);
});

/*
* Handler for form submission. Prevents the default action and calls longop() 2 times
*/
function callServer(event) {
    event.preventDefault();
    
    var form = event.currentTarget;
    console.log(form);                //prints the html element of calc_form, the form with the event listener
    var formData = new FormData(form);
    console.log(formData);            //prints empty FormData object
    var url = form.action;
    console.log('Sending calculation request to server');

    getData(url, formData)
        .then(data => addData(data))
        .catch(error => console.error(error));
}

表单的 HTML

<form id="calc_form" method="POST" action="/calculate">
        <div>
            <label for="first">First Value</label>
            <input type="number" id="first" name="first">
            <br>
            <label for="second">Second Value</label>
            <input type="number" id = "second" name="second">
        </div>
        <div>
            <input type="radio" id="add" name="operator" value="add">
            <label for="add">Add</label>
            <input type="radio" id="subtract" name="operator" value="subtract">
            <label for="subtract">Subtract</label>
            <input type="radio" id="multiply" name="operator" value="multiply">
            <label for="multiply">Multiply</label>
            <input type="radio" id="divide" name="operator" value="divide">
            <label for="divide">Divide</label>
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
        <div>
            <p id="results"></p>
        </div>
</form>

Answer 1

FormData 在这方面有点不寻常。当您将它打印到控制台时，您会看到 FormData{} 但这并不意味着它是空的。尝试使用 for...of 循环遍历它，您会看到它有内容。您可能会发现 MDN 上的此页面更有用:https://developer.mozilla.org/en-US/docs/Web/API/FormData