新的 FormData 返回空对象

Question

我正在尝试使用 FormData 通过 fetch API 在 POST 请求中发送用户输入的数据。问题是，当我使用我创建的表单创建一个新的 FormData 对象时，它会不断创建一个空对象 - 没有条目/键/值。我不知道为什么自从获取表单元素正确返回表单后，当我调用时new FormData(form)我得到一个空表单对象。从MDN 文档来看，表单似乎应该可以像我的表单那样在单独的 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

我发现问题了，居然有2个。

第一个是在上面的客户端代码中，我试图打印 FormData 对象。我不相信它实际上会打印一个空对象，认为我的输入字段中的条目或键中一定有一些东西。更改为console.log(form)后

    for (var [key, value] of formData.entries()) { 
        console.log(key, value);
    }

正如马克所建议的，我能够看到 formData 实际上已正确创建。

另一个问题是我忘记包含app.use(bodyParser.json())在服务器端。如果没有这个，服务器将无法解析 JSON 格式的请求正文。现在我按预期得到了 formData 内容。

这两个问题一起让我相信我遇到了问题new FormData()，但事实证明我只是对数据处理不当。

Answer 2

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