新的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

FormData 在这方面有点不寻常。当您将其打印到控制台时，您将看到

FormData {}

但这并不意味着它是空的。尝试使用 for...of 循环迭代它，您会看到它有内容。您可能会发现 MDN 上的此页面更有用：https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

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

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

console.log(form)

更改为

后

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

按照 Mark 的建议，我能够看到 formData 实际上已正确创建。

另一个问题是我忘记在服务器端包含

app.use(bodyParser.json())

。如果没有这个，服务器将无法解析 JSON 格式的请求正文。现在我得到了预期的 formData 内容。

这两个问题加在一起让我相信我遇到了问题

new FormData()

但事实证明我只是对数据处理不当。

Answer 3

对于一些可能面临相关问题的人，只需确保您的输入元素具有属性

name

。下面是我的例子。

export default function(){

const objectContext={};

const saveObject=()=>{
    let formElement = document.querySelector('#objectInfo')
    let formData = new FormData(formElement)
    for(let [key, value] of  formData.entries()){
        objectContext[key]=value
    }
    console.log(objectContext)
}
return div({style:'padding:1em;'},
        form({style:'display:flex;flex-direction:column;text-align:left',id:'objectInfo'},
            input({value:'',name:'objectName', placeholder:'Object Name'}),
            textarea({value:'',name:'objectDescription',placeholder:'Object Description'}),
            ),
        div({id:'object-context-wrapper'}),
        button({onclick:(e)=>{
            loadPage('/forms/newContext.js','#object-context-wrapper');
            e.target.disabled=true
            }},'Add Context'),
        button({onclick:()=>saveObject()},'Save Object')
    )

}