JavaScript FormData 包含对象 - Javascript

JavaScript的FormData对象是在发送AJAX请求时用于构建表单数据的API。它允许我们以键/值对的形式包装表单字段的值，并自动生成适当的编码以发送到服务端。

但是，有时您可能需要将JavaScript对象包装在FormData中，而不是从表单中获取值。 在这篇文章中，我们将会介绍如何将JavaScript对象包含在FormData中。

创建FormData

开始之前，我们需要创建一个空的FormData对象，以便我们可以将JavaScript对象添加到其中。

const formData = new FormData();

添加对象到FormData中

在我们向FormData添加对象之前，我们需要了解三个重要的点：

1. 我们无法直接将JavaScript对象传递给FormData对象
2. 我们需要使用JSON.stringify()将JavaScript对象转换为字符串
3. 我们需要使用FormData对象调用append()方法

下面是一个示例对象，我们将其包含在FormData中：

const person = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'painting'],
    address: {
        street: '123 Main Street',
        city: 'New York',
        state: 'NY',
        zip: '10001'
    }
};

我们将使用JSON.stringify()将person对象转换为字符串，并使用append()方法将其添加到FormData中：

formData.append('person', JSON.stringify(person));

获取FormData中对象的值

为了获取FormData中JavaScript对象的值，我们需要使用FormData对象的get()方法。

const personValue = formData.get('person');

但是，我们得到的是一个字符串版本的JavaScript对象。我们必须使用JSON.parse()将其转换回JavaScript对象。

const parsedPerson = JSON.parse(personValue);

现在我们已经可以访问person对象的属性，就像正常的JavaScript对象一样。

console.log(parsedPerson.name); // John
console.log(parsedPerson.age); // 30
console.log(parsedPerson.hobbies); // ['reading', 'painting']
console.log(parsedPerson.address); // { street: '123 Main Street', city: 'New York', state: 'NY', zip: '10001' }

总结

在本文中，我们了解了如何将JavaScript对象包含在FormData中，并获取其值。

重要注意事项：一旦将JavaScript对象转换为字符串后，应该谨慎考虑其大小，以免耗尽服务器资源。 FormData应仅用于相对小型的JavaScript对象。